文件上传进度条以及撤回请求实现

发布时间 2023-05-17 11:44:11作者: 小万子呀

文件上传进度条

export function cloudrtkImport(data, idx, callback, signal) {
  return request({
    url: "/***********",
    method: "POST",
    headers: {
      Authorization: "Bearer" + sessionStorage.getItem("access_token"),
      "Content-Type": "multipart/form-data",
    },
    data,
    signal,
    onUploadProgress(progressEvent) {
      if (progressEvent.loaded) {
        callback && callback(progressEvent, idx);
      }
    },
  });
}
updataFile (item, i) {
  let formData = new FormData()
  formData.append('file', item.file)
  formData.append("id", this.row.id)
  const controller = new AbortController()
  cloudrtkImport(formData, i, (e, idx) => {
    if (!this.isAllstart || item.isStop) { // 判断是否终止请求
      controller.abort()
      return
    }
    let percent = ((e.loaded / e.total) * 100).toFixed(0) // 当前上传进度
    // 这里动态调整上传进度
    
  }, controller.signal).then(res => {
  		// 上传完成
  }).catch(error => {
    console.error(error)
  })
  item.cancelUpload = function () {
    controller.abort()
  }
},