为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

喵喔喔 2019-03-12 17:22:46
如上图所示,当我点击提交时,镜像会一直上传,并且带有进度条,弹框不会消失(直到上传成功才会消失)。这个功能我已经实现了。目前有个疑问是,我如何触发上传的取消事件(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);                  })
查看完整描述

2 回答

  • 2 回答
  • 0 关注
  • 3589 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号