上传文件进度优化

src/api/examwork-task.js

@@ -45,7 +45,12 @@ export async function importPaper({
   });
 }
 
-export async function importExamStudent({ examId, fileName, file }) {
+export async function importExamStudent({
+  examId,
+  fileName,
+  file,
+  onUploadProgress,
+}) {
   const form = new FormData();
   form.append("examId", examId);
   form.append("fileName", fileName);
@@ -55,6 +60,15 @@ export async function importExamStudent({ examId, fileName, file }) {
       "Content-Type": "multipart/form-data",
       md5: await getMd5FromBlob(file),
     },
+    onUploadProgress(progressEvent) {
+      let percent = 0;
+      if (progressEvent.total > 0 && progressEvent.loaded) {
+        percent = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(
+          0
+        );
+      }
+      onUploadProgress && onUploadProgress(percent);
+    },
   });
 }
 

src/api/system-info.js

@@ -19,7 +19,10 @@ export async function uploadFile({ file, onProgress }) {
           // console.log(progressEvent);
           let e = {};
           if (progressEvent.total > 0 && progressEvent.loaded) {
-            e.percent = (progressEvent.loaded / progressEvent.total) * 100;
+            e.percent = (
+              (progressEvent.loaded / progressEvent.total) *
+              100
+            ).toFixed(0);
           }
           onProgress(e);
         },

src/features/examwork/ExamStudentImport/ExamStudentImportDialog.vue

@@ -2,7 +2,7 @@
   <el-dialog
     ref="dialog"
     :title="'导入' + '考生'"
-    width="480px"
+    width="540px"
     :visible.sync="visible"
     @close="closeDialog"
   >
@@ -17,6 +17,9 @@
         <el-form-item label="选择文件">
           <input @change="selectFile" type="file" />
         </el-form-item>
+        <el-form-item label="">
+          {{ uploadingPercent ? ` 上传中(${uploadingPercent}%)` : "" }}
+        </el-form-item>
       </el-row>
       <el-row class="d-flex justify-content-center">
         <el-button type="primary" @click="submitForm" :loading="loading"
@@ -51,6 +54,7 @@ export default {
       },
       rules: {},
       loading: false,
+      uploadingPercent: 0,
     };
   },
   methods: {
@@ -67,16 +71,19 @@ export default {
     async submitForm() {
       try {
         this.loading = true;
+        this.uploadingPercent = 0;
         await importExamStudent({
           examId: this.examId,
           file: this.form.file,
           fileName: this.form.fileName,
+          onUploadProgress: (percent) => (this.uploadingPercent = percent),
         });
         this.$emit("reload");
         this.$notify({ title: "导入任务已成功启动", type: "success" });
         this.closeDialog();
       } finally {
         this.loading = false;
+        this.uploadingPercent = 0;
       }
     },
   },

src/plugins/axiosApp.js

@@ -23,7 +23,7 @@ import CryptoJS from "crypto-js";
 
 const config = {
   // baseURL: process.env.baseURL || process.env.apiUrl || ""
-  timeout: 60 * 1000, // Timeout
+  timeout: 3 * 60 * 1000, // Timeout
   withCredentials: true, // Check cross-site Access-Control
 };
 const cacheGetUrls = [];