文件 md5 处理优化

src/api/examwork-task.js

@@ -1,8 +1,8 @@
 import { httpApp } from "@/plugins/axiosIndex";
 import { pickBy } from "lodash-es";
-import { object2QueryString } from "@/utils/utils";
+import { getMd5FromBlob, object2QueryString } from "@/utils/utils";
 
-export function searchTasks({
+export async function searchTasks({
   examId = "",
   entityId = "",
   type = "",
@@ -16,7 +16,7 @@ export function searchTasks({
   return httpApp.post("/api/admin/task/query?" + object2QueryString(data));
 }
 
-export function importPaper({
+export async function importPaper({
   examId,
   processPaper,
   processAnswer,
@@ -26,7 +26,6 @@ export function importPaper({
   audioPlayCount = "",
   fileName,
   file,
-  md5,
 }) {
   const form = new FormData();
   form.append("examId", examId);
@@ -39,31 +38,40 @@ export function importPaper({
   form.append("fileName", fileName);
   form.append("file", file);
   return httpApp.post("/api/admin/exam/paper/import", form, {
-    headers: { "Content-Type": "multipart/form-data", md5 },
+    headers: {
+      "Content-Type": "multipart/form-data",
+      md5: await getMd5FromBlob(file),
+    },
   });
 }
 
-export function importExamStudent({ examId, fileName, file, md5 }) {
+export async function importExamStudent({ examId, fileName, file }) {
   const form = new FormData();
   form.append("examId", examId);
   form.append("fileName", fileName);
   form.append("file", file);
   return httpApp.post("/api/admin/examStudent/import", form, {
-    headers: { "Content-Type": "multipart/form-data", md5 },
+    headers: {
+      "Content-Type": "multipart/form-data",
+      md5: await getMd5FromBlob(file),
+    },
   });
 }
 
-export function importInvigilator({ examId, fileName, file, md5 }) {
+export async function importInvigilator({ examId, fileName, file }) {
   const form = new FormData();
   form.append("examId", examId);
   form.append("fileName", fileName);
   form.append("file", file);
   return httpApp.post("/api/admin/invigilateUser/import", form, {
-    headers: { "Content-Type": "multipart/form-data", md5 },
+    headers: {
+      "Content-Type": "multipart/form-data",
+      md5: await getMd5FromBlob(file),
+    },
   });
 }
 
-export function exportInvigilate({ examId, roomCode, userId }) {
+export async function exportInvigilate({ examId, roomCode, userId }) {
   const form = new FormData();
   form.append("examId", examId);
   form.append("roomCode", roomCode);

src/api/system-info.js

@@ -1,37 +1,28 @@
 import { httpApp } from "@/plugins/axiosIndex";
-import { object2QueryString } from "@/utils/utils";
+import { getMd5FromBlob, object2QueryString } from "@/utils/utils";
 import { pickBy } from "lodash-es";
-import MD5 from "js-md5";
 
 export async function uploadFile({ file, onProgress }) {
   const form = new FormData();
   form.append("file", file);
-  async function blobToArray(blob) {
-    return new Promise((resolve) => {
-      var reader = new FileReader();
-      reader.addEventListener("loadend", function () {
-        // reader.result contains the contents of blob as a typed array
-        resolve(reader.result);
-      });
-      reader.readAsArrayBuffer(blob);
-    });
-  }
-  const ab = await blobToArray(file);
-  const md5 = MD5(ab);
+
+  const md5 = await getMd5FromBlob(file);
 
   return httpApp.post(
     "/api/admin/sys/file/upload?" + object2QueryString({ type: "frontend" }),
     form,
     {
       headers: { "Content-Type": "multipart/form-data", md5: md5 },
-      onUploadProgress: function (progressEvent) {
-        // console.log(progressEvent);
-        let e = {};
-        if (progressEvent.total > 0 && progressEvent.loaded) {
-          e.percent = (progressEvent.loaded / progressEvent.total) * 100;
-        }
-        onProgress(e);
-      },
+      onUploadProgress:
+        onProgress &&
+        function (progressEvent) {
+          // console.log(progressEvent);
+          let e = {};
+          if (progressEvent.total > 0 && progressEvent.loaded) {
+            e.percent = (progressEvent.loaded / progressEvent.total) * 100;
+          }
+          onProgress(e);
+        },
     }
   );
 }

src/features/examwork/CourseManagement/PaperImportDialog.vue

@@ -59,7 +59,6 @@
 </template>
 
 <script>
-import MD5 from "js-md5";
 import { importPaper } from "@/api/examwork-task";
 
 export default {
@@ -103,24 +102,11 @@ export default {
       this.form.fileName = this.form.file?.name;
     },
     async submitForm() {
-      async function blobToArray(blob) {
-        return new Promise((resolve) => {
-          var reader = new FileReader();
-          reader.addEventListener("loadend", function () {
-            // reader.result contains the contents of blob as a typed array
-            resolve(reader.result);
-          });
-          reader.readAsArrayBuffer(blob);
-        });
-      }
-      const ab = await blobToArray(this.form.file);
-      const md5 = MD5(ab);
-
       let data = this.form;
 
       try {
         this.loading = true;
-        await importPaper({ ...data, examId: this.examId, md5 });
+        await importPaper({ ...data, examId: this.examId });
         this.$emit("reload");
         this.$notify({ title: "导入任务已成功启动", type: "success" });
         this.closeDialog();

src/features/examwork/ExamStudentImport/ExamStudentImportDialog.vue

@@ -30,7 +30,6 @@
 
 <script>
 import { importExamStudent } from "@/api/examwork-task";
-import MD5 from "js-md5";
 
 export default {
   name: "ExamStudentImportDialog",
@@ -66,26 +65,12 @@ export default {
       this.form.fileName = this.form.file?.name;
     },
     async submitForm() {
-      async function blobToArray(blob) {
-        return new Promise((resolve) => {
-          var reader = new FileReader();
-          reader.addEventListener("loadend", function () {
-            // reader.result contains the contents of blob as a typed array
-            resolve(reader.result);
-          });
-          reader.readAsArrayBuffer(blob);
-        });
-      }
-      const ab = await blobToArray(this.form.file);
-      const md5 = MD5(ab);
-
       try {
         this.loading = true;
         await importExamStudent({
           examId: this.examId,
           file: this.form.file,
           fileName: this.form.fileName,
-          md5,
         });
         this.$emit("reload");
         this.$notify({ title: "导入任务已成功启动", type: "success" });

src/features/examwork/InvigilateManagement/InvigilateImportDialog.vue

@@ -30,7 +30,6 @@
 
 <script>
 import { importInvigilator } from "@/api/examwork-task";
-import MD5 from "js-md5";
 
 export default {
   name: "InvigilateImportDialog",
@@ -76,26 +75,12 @@ export default {
       this.form.fileName = this.form.file?.name;
     },
     async submitForm() {
-      async function blobToArray(blob) {
-        return new Promise((resolve) => {
-          var reader = new FileReader();
-          reader.addEventListener("loadend", function () {
-            // reader.result contains the contents of blob as a typed array
-            resolve(reader.result);
-          });
-          reader.readAsArrayBuffer(blob);
-        });
-      }
-      const ab = await blobToArray(this.form.file);
-      const md5 = MD5(ab);
-
       try {
         this.loading = true;
         await importInvigilator({
           examId: this.examId,
           file: this.form.file,
           fileName: this.form.fileName,
-          md5,
         });
         this.$emit("reload");
         this.$notify({ title: "导入任务已成功启动", type: "success" });

src/features/invigilation/RealtimeMonitoring/audioRecord/AudioRecordDialog.vue

@@ -59,7 +59,6 @@
 </template>
 
 <script>
-import MD5 from "js-md5";
 import { uploadFile } from "@/api/system-info";
 import { sendWarningMsg } from "@/api/invigilation";
 import AudioRecord from "./audioRecord";
@@ -205,20 +204,8 @@ export default {
       if (this.isSubmit) return;
       this.isSubmit = true;
 
-      async function blobToArray(blob) {
-        return new Promise((resolve) => {
-          var reader = new FileReader();
-          reader.addEventListener("loadend", function () {
-            resolve(reader.result);
-          });
-          reader.readAsArrayBuffer(blob);
-        });
-      }
-      const ab = await blobToArray(this.audioBlob);
-      const md5 = MD5(ab);
       const res = await uploadFile({
         file: this.audioBlob,
-        md5,
       }).catch(() => {});
 
       if (!res) {

src/features/system/OrgManagement/UploadFile.vue

@@ -19,7 +19,6 @@
 </template>
 
 <script>
-// import MD5 from "js-md5";
 import { uploadFile } from "@/api/system-info";
 
 /**

src/utils/utils.js

@@ -1,6 +1,7 @@
 import { YYYYMMDDHHmmss } from "@/constant/constants";
 import moment from "moment";
 import queryString from "query-string";
+import MD5 from "js-md5";
 
 export function dateFormatForAPI(date) {
   return moment(date).format(YYYYMMDDHHmmss);
@@ -181,3 +182,19 @@ export function timeNumberToText(timeNumber) {
 export function deepCopy(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
+
+/** @param blob {Blob} File is a type of Blob */
+export async function getMd5FromBlob(blob) {
+  async function blobToArray(blob) {
+    return new Promise((resolve) => {
+      var reader = new FileReader();
+      reader.addEventListener("loadend", function () {
+        // reader.result contains the contents of blob as a typed array
+        resolve(reader.result);
+      });
+      reader.readAsArrayBuffer(blob);
+    });
+  }
+  const ab = await blobToArray(blob);
+  return MD5(ab);
+}