使用axios上传文件，如何取消上传

Question

如上图所示，当我点击提交时，镜像会一直上传，并且带有进度条，弹框不会消失（直到上传成功才会消失）。

这个功能我已经实现了。

目前有个疑问是，我如何触发上传的取消事件（Abort）。

当我点击取消按钮时，上传功能取消。

贴上代码

                var fd = new FormData();

                fd.append('image', that.$refs.upload.files[0]);

                fd.append('filename', that.formData.images);

                fd.append("system_type", that.formData.systemTypeVal);

                fd.append("name", that.formData.imagesName);

                fd.append("description", that.formData.description);

                fd.append("system_vision", that.formData.systemVersion);

                fd.append("disk_format", that.formData.format);

                that.Axios({

                  method: 'post',

                  url: that.prefix + '/yr_images/create_image/',

                  data: fd,

                  headers: { 'Content-Type': 'multipart/form-data' },

                  onUploadProgress(progressEvent){

                    if (progressEvent.lengthComputable) {

                      let val = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);

                      that.formData.showProgress = true;

                      that.formData.startValue = parseInt(val)

                    }

                  }

                })

                  .then(function (response) {

                    if (response.data.status == 1) {

                      if (that.formData.startValue == 100) {

                        util.notification('success', '成功', response.data.success_msg);

                        that.getData(1);

                      }

                    } else {

                      util.notification('error', '错误', response.data.error_msg);

                    }

                    that.modal.formVisible = false;

                  })

                  .catch(function (error) {

                    that.modal.loading = false;

                    that.modal.formVisible = false;

                    console.log(error);

                  })