axios获取接口进度（上传文件）

封装的post请求，onUploadProgress为获取进度，signal为中止请求的参数

  post(path: string, body?: IObject, headers?: IObject, timeout: number = 30000, signal?: any, onUploadProgress?: (progressEvent: any) => void): Promise<IHttpResponse> {
    return http({
      url: path,
      method: "post",
      timeout: timeout,
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
        appType: app.appType,
        ...headers
      },
      data: body,
      onUploadProgress: onUploadProgress,
      signal: signal
    });
  }
}

定义接口

export const uploadMaterial = (formData: any, signal?: AbortSignal, onProgress?: (percent: number) => void) => {
  return baseService.post(
    "/api/training/material/upload",
    formData,
    {},
    3600000,
    signal,
    (progressEvent) => { // 直接传递 onUploadProgress 回调函数
      if (progressEvent.lengthComputable && onProgress) {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        onProgress(percentCompleted); // 调用传入的回调，并传递进度百分比
      }
    }
  );
};

调用接口
这里的使用场景是批量上传，

async function uploadFilesSequentially() {
  let allFilesSucceeded = true;
  if (file.value.length > 0) {
    for (let i = 0; i < file.value.length; i++) {
      if (file.value[i]) {
        let formData = new FormData();
        formData.append("file", file.value[i]);
        formData.append("categoryId", categoryId.value);
        fileList.value[i].status = "uploading"; // 更新当前文件上传状态
        try {
          const handleProgress = (percent) => {
            if (percent >= 90) {
              if (timer.value) return; // 如果已经有定时器在运行，则直接返回

              // 设置定时器，每秒更新一次进度
              timer.value = window.setInterval(() => {
                fileList.value[i].progress += 1;
                if (fileList.value[i].progress > 98) {
                  timer.value && window.clearInterval(timer.value);
                }
              }, 1000);
            } else {
              // 在进度达到80之前，直接按照传入的 percent 更新进度
              fileList.value[i].progress = percent; // 这里应该是更新 progress.value，而不是 complete
            }
          };

          const res = await uploadMaterial(formData, abortController.value.signal, handleProgress); // 等待上一次上传完成
          if (res.code == 0) {
            console.log("文件 " + (i + 1) + " 上传成功"); // 打印当前文件上传成功的消息
            fileList.value[i].status = "success"; // 更新当前文件上传状态
            file.value[i] = null; // 更新当前文件上传状态
            fileNumber.value++;
          } else {
            allFilesSucceeded = false; // 如果有文件上传失败，更新标志
            fileList.value[i].status = "error"; // 更新当前文件上传状态
            file.value[i] = null; // 更新当前文件上传状态
            console.error("文件 " + (i + 1) + " 上传失败");
            fileNumber.value++;
          }
        } catch (error) {
          allFilesSucceeded = false; // 如果捕获到异常，也更新标志
          // ElMessage.success("所有文件上传完成");
        }
      }
    }
    if (allFilesSucceeded && fileList.value.length > 0) {
      console.log("所有文件上传成功"); // 所有文件上传成功后打印的消息
      closeDialog();
      // 这里可以调用其他函数，如 handleClose(); 或 emit("refreshDataList");
    } else {
      console.log("部分文件上传失败"); // 如果有文件上传失败，则打印此消息
      abortController.value.abort();
      fileList.value = [];
      categoryId.value = "";
      file.value = [];
      multipleUpload.value.clearFiles();
      abortController.value = new AbortController();
    }
    // ElMessage.success("所有文件上传完成");
  }
}```

中止请求
  // 初始化取消控制器实例
const abortController = ref(new AbortController());

在取消请求的方法中
const interruptRequest = ()=>{
// 取消文件上传
  abortController.value.abort();
    // 创建新的取消控制器实例
    abortController.value = new AbortController();
} 

代码只是简单的示例，直接使用可能有未知bug