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

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

1.   post(path: string, body?: IObject, headers?: IObject, timeout: number = 30000, signal?: any, onUploadProgress?: (progressEvent: any) => void): Promise<IHttpResponse> {
2.     return http({
3.       url: path,
4.       method: "post",
5.       timeout: timeout,
6.       headers: {
7.         "Content-Type": "application/json;charset=UTF-8",
8.         appType: app.appType,
9.         ...headers
10.       },
11.       data: body,
12.       onUploadProgress: onUploadProgress,
13.       signal: signal
14.     });
15.   }
16. }

复制代码

界说接口

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

复制代码

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

1. async function uploadFilesSequentially() {
2.   let allFilesSucceeded = true;
3.   if (file.value.length > 0) {
4.     for (let i = 0; i < file.value.length; i++) {
5.       if (file.value[i]) {
6.         let formData = new FormData();
7.         formData.append("file", file.value[i]);
8.         formData.append("categoryId", categoryId.value);
9.         fileList.value[i].status = "uploading"; // 更新当前文件上传状态
10.         try {
11.           const handleProgress = (percent) => {
12.             if (percent >= 90) {
13.               if (timer.value) return; // 如果已经有定时器在运行，则直接返回
15.               // 设置定时器，每秒更新一次进度
16.               timer.value = window.setInterval(() => {
17.                 fileList.value[i].progress += 1;
18.                 if (fileList.value[i].progress > 98) {
19.                   timer.value && window.clearInterval(timer.value);
20.                 }
21.               }, 1000);
22.             } else {
23.               // 在进度达到80之前，直接按照传入的 percent 更新进度
24.               fileList.value[i].progress = percent; // 这里应该是更新 progress.value，而不是 complete
25.             }
26.           };
28.           const res = await uploadMaterial(formData, abortController.value.signal, handleProgress); // 等待上一次上传完成
29.           if (res.code == 0) {
30.             console.log("文件 " + (i + 1) + " 上传成功"); // 打印当前文件上传成功的消息
31.             fileList.value[i].status = "success"; // 更新当前文件上传状态
32.             file.value[i] = null; // 更新当前文件上传状态
33.             fileNumber.value++;
34.           } else {
35.             allFilesSucceeded = false; // 如果有文件上传失败，更新标志
36.             fileList.value[i].status = "error"; // 更新当前文件上传状态
37.             file.value[i] = null; // 更新当前文件上传状态
38.             console.error("文件 " + (i + 1) + " 上传失败");
39.             fileNumber.value++;
40.           }
41.         } catch (error) {
42.           allFilesSucceeded = false; // 如果捕获到异常，也更新标志
43.           // ElMessage.success("所有文件上传完成");
44.         }
45.       }
46.     }
47.     if (allFilesSucceeded && fileList.value.length > 0) {
48.       console.log("所有文件上传成功"); // 所有文件上传成功后打印的消息
49.       closeDialog();
50.       // 这里可以调用其他函数，如 handleClose(); 或 emit("refreshDataList");
51.     } else {
52.       console.log("部分文件上传失败"); // 如果有文件上传失败，则打印此消息
53.       abortController.value.abort();
54.       fileList.value = [];
55.       categoryId.value = "";
56.       file.value = [];
57.       multipleUpload.value.clearFiles();
58.       abortController.value = new AbortController();
59.     }
60.     // ElMessage.success("所有文件上传完成");
61.   }
62. }```
64. 中止请求
65.   // 初始化取消控制器实例
66. const abortController = ref(new AbortController());
68. 在取消请求的方法中
69. const interruptRequest = ()=>{
70. // 取消文件上传
71.   abortController.value.abort();
72.     // 创建新的取消控制器实例
73.     abortController.value = new AbortController();
74. }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金