鍍金池/ 問答/HTML5  HTML/ 使用axios上傳文件,如何取消上傳

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

clipboard.png

如上圖所示,當(dāng)我點(diǎn)擊提交時(shí),鏡像會(huì)一直上傳,并且?guī)в羞M(jìn)度條,彈框不會(huì)消失(直到上傳成功才會(huì)消失)。
這個(gè)功能我已經(jīng)實(shí)現(xiàn)了。

目前有個(gè)疑問是,我如何觸發(fā)上傳的取消事件(Abort)。
當(dāng)我點(diǎn)擊取消按鈕時(shí),上傳功能取消。

貼上代碼

                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', '錯(cuò)誤', response.data.error_msg);
                    }
                    that.modal.formVisible = false;
                  })
                  .catch(function (error) {
                    that.modal.loading = false;
                    that.modal.formVisible = false;
                    console.log(error);
                  })
回答
編輯回答
朕略萌

https://github.com/axios/axio...

就是在發(fā)起請(qǐng)求時(shí), 添加 cancelToken 參數(shù), 然后對(duì)這個(gè) token 調(diào)用 cancel 方法.

2018年1月20日 20:51
編輯回答
好難瘦

按樓上的方法,問題已決定,其實(shí)axios已經(jīng)提供了方法。
貼一下我自己的代碼吧。

//在data里聲明一個(gè)source
data(){
return{
source:null,//取消上傳
}
//上傳文件
                let that = this;
                let cancelToken = that.Axios.CancelToken;//Axios使我修改axios原型鏈了。
                that.source = cancelToken.source();
                var fd = new FormData();//聲明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({//發(fā)送axios請(qǐng)求
                  method: 'post',
                  url: that.prefix + '/yr_images/create_image/',
                  data: fd,
                  headers: { 'Content-Type': 'multipart/form-data' },
                  cancelToken:that.source.token,//取消事件
                  onUploadProgress(progressEvent){//上傳進(jìn)度條事件
                    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', '錯(cuò)誤', response.data.error_msg);
                    }
                    that.modal.formVisible = false;
                  })
                  .catch(function (error) {
                    that.modal.loading = false;
                    that.modal.formVisible = false;
                    if(that.Axios.isCancel(error)){//主要是這里
                      util.notification('success', '成功', '取消上傳鏡像操作成功');
                    }
                  });
}


//點(diǎn)擊取消事件,也就是上圖的取消按鈕
       cancel(){
       let that = this;
        if(that.source){//我先判斷soucre是否存在,因?yàn)槿绻掖蜷_彈框不作任何操作,點(diǎn)擊取消按鈕沒有這一層判斷的話,that.source.cancel('取消上傳');會(huì)報(bào)錯(cuò)。
          that.source.cancel('取消上傳');//"取消上傳"這幾個(gè)字,會(huì)在上面catch()的error中輸出的,可以console看一下。
        }
        that.modal.formVisible = false;
       }
2017年9月25日 12:04