更换分片上传时的MD5计算

src/components/plugins/uploadFile/common/md5.js

@@ -1,56 +1,27 @@
-import SparkMD5 from 'spark-md5'
+import md5 from 'js-md5'
 
 /**
  * 分段计算MD5
  * @param file {File}
- * @param options {Object} - onProgress | onSuccess | onError
+ * @param options {Object} - onSuccess | onError
  */
 export function generateMD5(file, options = {}) {
-  const fileReader = new FileReader()
-  const time = new Date().getTime()
-  const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
-  const chunkSize = 10 * 1024 * 1000
-  const chunks = Math.ceil(file.size / chunkSize)
-  let currentChunk = 0
-  const spark = new SparkMD5.ArrayBuffer()
-  const loadNext = () => {
-    let start = currentChunk * chunkSize
-    let end = start + chunkSize >= file.size ? file.size : start + chunkSize
-
-    fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
-  }
-
-  loadNext()
-
-  fileReader.onload = (e) => {
-    spark.append(e.target.result)
-
-    if (currentChunk < chunks) {
-      currentChunk++
-      loadNext()
-      if (options.onProgress && typeof options.onProgress == 'function') {
-        options.onProgress(currentChunk, chunks)
-      }
-    } else {
-      let md5 = spark.end()
-
-      // md5计算完毕
-      if (options.onSuccess && typeof options.onSuccess == 'function') {
-        options.onSuccess(md5)
-      }
-
-      console.log(
-        `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${
-          new Date().getTime() - time
-        } ms`
-      )
+    const fileReader = new FileReader()
+    fileReader.readAsBinaryString(file.file)
+    fileReader.onload = (e) => {
+        let fileBolb = e.target.result
+        let fileMD5 = md5(fileBolb)
+        console.log(`MD5计算完毕：${file.name} \nMD5：${fileMD5}`)
+        // md5计算完毕
+        if (options.onSuccess && typeof options.onSuccess == 'function') {
+            options.onSuccess(fileMD5)
+        }
     }
-  }
 
-  fileReader.onerror = function () {
-    console.log('MD5计算失败')
-    if (options.onError && typeof options.onError == 'function') {
-      options.onError()
+    fileReader.onerror = function () {
+        console.log('MD5计算失败')
+        if (options.onError && typeof options.onError == 'function') {
+            options.onError()
+        }
     }
-  }
 }

src/components/plugins/uploadFile/common/md5_bak.js

@@ -0,0 +1,56 @@
+import SparkMD5 from 'spark-md5'
+
+/**
+ * 分段计算MD5
+ * @param file {File}
+ * @param options {Object} - onProgress | onSuccess | onError
+ */
+export function generateMD5(file, options = {}) {
+  const fileReader = new FileReader()
+  const time = new Date().getTime()
+  const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
+  const chunkSize = 10 * 1024 * 1000
+  const chunks = Math.ceil(file.size / chunkSize)
+  let currentChunk = 0
+  const spark = new SparkMD5.ArrayBuffer()
+  const loadNext = () => {
+    let start = currentChunk * chunkSize
+    let end = start + chunkSize >= file.size ? file.size : start + chunkSize
+
+    fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
+  }
+
+  loadNext()
+
+  fileReader.onload = (e) => {
+    spark.append(e.target.result)
+
+    if (currentChunk < chunks) {
+      currentChunk++
+      loadNext()
+      if (options.onProgress && typeof options.onProgress == 'function') {
+        options.onProgress(currentChunk, chunks)
+      }
+    } else {
+      let md5 = spark.end()
+
+      // md5计算完毕
+      if (options.onSuccess && typeof options.onSuccess == 'function') {
+        options.onSuccess(md5)
+      }
+
+      console.log(
+        `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${
+          new Date().getTime() - time
+        } ms`
+      )
+    }
+  }
+
+  fileReader.onerror = function () {
+    console.log('MD5计算失败')
+    if (options.onError && typeof options.onError == 'function') {
+      options.onError()
+    }
+  }
+}

src/components/plugins/uploadFile/index.vue

@@ -53,7 +53,7 @@ import HcUploaderBtn from './components/btn.vue'
 import HcUploaderUnsupport from './components/unsupport.vue'
 import HcUploaderList from './components/list.vue'
 import HcUploaderFile from './components/file.vue'
-import {getArrValue, getObjValue} from "js-fast-way";
+import {getArrValue, getObjValue, getFileSuffix} from "js-fast-way";
 import {ElNotification} from "element-plus";
 import {generateMD5} from './common/md5'
 import Bus from '~src/plugins/bus.js'
@@ -146,7 +146,11 @@ export default {
             panelShow.value = true
             trigger('fileAdded')
             // 将额外的参数赋值到每个文件上，以不同文件使用不同params的需求
-            file.params = customParams.value
+            file.params = {
+                ...customParams,
+                objectType: getFileSuffix(file.name),
+                fileType: file.fileType,
+            }
             // 计算MD5
             const md5 = await computeMD5(file)
             startUpload(file, md5)
@@ -159,15 +163,12 @@ export default {
             file.pause()
             // 计算MD5时隐藏”开始“按钮
             setResumeStyle(file.id, 'none')
+            nextTick(() => {
+                document.querySelector(`.custom-status-${file.id}`).innerText = '校验MD5中'
+            })
             // 开始计算MD5
             return new Promise((resolve, reject) => {
                 generateMD5(file, {
-                    onProgress(currentChunk, chunks) {
-                        // 实时展示MD5的计算进度
-                        nextTick(() => {
-                            document.querySelector(`.custom-status-${file.id}`).innerText = '校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
-                        })
-                    },
                     onSuccess(md5) {
                         statusRemove(file.id)
                         resolve(md5)