feat(文件上传): 使用 rusha 实现七牛云 ETag 计算优化文件上传

替换 browser-md5-file 为 rusha 实现七牛云 ETag 计算算法，提升大文件哈希计算性能
新增 qiniuFileHash 工具函数，支持进度回调
重构 FileUploaderField 和 ImageUploaderField 组件上传逻辑

@@ -94,6 +94,7 @@
     "pinia": "^2.0.14",
     "postcss-px-to-viewport": "^1.1.1",
     "qs": "^6.10.3",
+    "rusha": "^0.8.14",
     "tslint": "^6.1.3",
     "unplugin-auto-import": "^0.8.8",
     "unplugin-vue-components": "^0.23.0",

@@ -92,10 +92,9 @@ import { showSuccessToast, showFailToast, showToast } from "vant";
 import _ from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
-import BMF from "browser-md5-file";
+import { qiniuFileHash } from "@/utils/qiniuFileHash.js";
 import { useRoute } from "vue-router";
 import axios from "axios";
-import { getEtag } from "@/utils/qetag.js"; // 生成hash值
 import { wxInfo } from "@/utils/tools";
 
 const $route = useRoute();
@@ -320,47 +319,45 @@ const beforeDelete = (files) => {
 const loading = ref(false);
 const formCode = $route.query.code; // 表单code
 
-// 上传文件返回文件URL
+/**
+ * 上传文件并返回文件URL
+ * @param {Object} files 当前上传项（van-uploader传入对象）
+ * @returns {Promise<Object>} 服务端返回的文件信息
+ * @description 使用 qiniuFileHash 计算文件哈希（遵循七牛ETag），替换原MD5逻辑
+ */
 const handleUpload = async (files) => {
-  loading.value = true;
-  // 获取HASH值
-  // const hash = getEtag(files.content);
-  return new Promise((resolve, reject) => {
-    // 获取MD5值
-    const bmf = new BMF();
-    bmf.md5(
-      files.file,
-      async (err, md5) => {
-        if (err) {
-          console.log(err);
-          reject(err);
-        }
-        // 获取七牛token
-        const filename = files.file.name; // 真实文件名
-        const getToken = await qiniuTokenAPI({
-          name: filename,
-          hash: md5,
-        });
-        // 文件上传七牛云
-        let imgUrl = "";
-        // 第一次上传
-        if (getToken.token) {
-          files.status = "uploading";
-          files.message = "上传中...";
-          // 返回数据库真实文件地址
-          imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
-        }
-        // 重复上传
-        if (getToken.data) {
-          imgUrl = getToken.data;
+    loading.value = true;
+    return new Promise(async (resolve, reject) => {
+        try {
+            // 计算文件哈希（ETag），用于服务端去重及生成上传key
+            const md5 = await qiniuFileHash(files.file, (progress) => {
+                // 计算进度（此处保留钩子，便于后续展示进度）
+            });
+            // 获取七牛token
+            const filename = files.file.name; // 真实文件名
+            const getToken = await qiniuTokenAPI({
+                name: filename,
+                hash: md5,
+            });
+            // 文件上传七牛云
+            let imgUrl = "";
+            // 第一次上传
+            if (getToken.token) {
+                files.status = "uploading";
+                files.message = "上传中...";
+                // 返回数据库真实文件地址
+                imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
+            }
+            // 重复上传
+            if (getToken.data) {
+                imgUrl = getToken.data;
+            }
+            resolve(imgUrl);
+        } catch (err) {
+            console.log(err);
+            reject(err);
         }
-        resolve(imgUrl);
-      },
-      (process) => {
-        //计算进度
-      }
-    );
-  });
+    });
 };
 
 // 多选文件上传遍历

 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-14 13:06:43
+ * @LastEditTime: 2025-11-11 17:27:12
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 图片上传控件
 -->
@@ -75,10 +75,9 @@ import { showSuccessToast, showFailToast, showToast, showImagePreview } from "va
 import _ from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
-import BMF from "browser-md5-file";
+import { qiniuFileHash } from "@/utils/qiniuFileHash.js";
 import { useRoute } from "vue-router";
 import axios from "axios";
-import { getEtag } from "@/utils/qetag.js"; // 生成hash值
 
 const $route = useRoute();
 const props = defineProps({
@@ -257,47 +256,45 @@ const formCode = $route.query.code; // 表单code
 //   return uuid;
 // };
 
-// 上传图片返回图片URL
+/**
+ * 上传图片并返回图片URL
+ * @param {Object} files 当前上传项（van-uploader传入对象）
+ * @returns {Promise<Object>} 服务端返回的图片信息
+ * @description 使用 qiniuFileHash 计算文件哈希（遵循七牛ETag），替换原MD5逻辑
+ */
 const handleUpload = async (files) => {
-  loading.value = true;
-  // 获取HASH值
-  // const hash = getEtag(files.content);
-  return new Promise((resolve, reject) => {
-    // 获取MD5值
-    const bmf = new BMF();
-    bmf.md5(
-      files.file,
-      async (err, md5) => {
-        if (err) {
-          console.log(err);
-          reject(err);
-        }
-        // 获取七牛token
-        const filename = files.file.name; // 真实文件名
-        const getToken = await qiniuTokenAPI({
-          name: filename,
-          hash: md5,
-        });
-        // 文件上传七牛云
-        let imgUrl = "";
-        // 第一次上传
-        if (getToken.token) {
-          files.status = "uploading";
-          files.message = "上传中...";
-          // 返回数据库真实图片地址
-          imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
+    loading.value = true;
+    return new Promise(async (resolve, reject) => {
+        try {
+            // 计算文件哈希（ETag），用于服务端去重及生成上传key
+            const md5 = await qiniuFileHash(files.file, (progress) => {
+                // 计算进度（此处保留钩子，便于后续展示进度）
+            });
+            // 获取七牛token
+            const filename = files.file.name; // 真实文件名
+            const getToken = await qiniuTokenAPI({
+                name: filename,
+                hash: md5,
+            });
+            // 文件上传七牛云
+            let imgUrl = "";
+            // 第一次上传
+            if (getToken.token) {
+                files.status = "uploading";
+                files.message = "上传中...";
+                // 返回数据库真实图片地址
+                imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
+            }
+            // 重复上传
+            if (getToken.data) {
+                imgUrl = getToken.data;
+            }
+            resolve(imgUrl);
+        } catch (err) {
+            console.log(err);
+            reject(err);
         }
-        // 重复上传
-        if (getToken.data) {
-          imgUrl = getToken.data;
-        }
-        resolve(imgUrl);
-      },
-      (process) => {
-        //计算进度
-      }
-    );
-  });
+    });
 };
 
 // 多选图片上传遍历

+import Rusha from 'rusha'
+/**
+ * 完全遵循七牛云对象存储（Qiniu Kodo）的 ETag 计算规则，在浏览器中计算文件 ETag。
+ *
+ * @param {File} file 用户通过 <input> 选择的 File 对象
+ * @param {(progress: { computed: number, total: number, percent: number }) => void} [progressCallback] 计算进度的回调函数
+ * @returns {Promise<string>} 一个 Promise，最终解析为计算出的 eTag 字符串
+ */
+export const qiniuFileHash = async(file, progressCallback) => {
+  // --- 辅助函数 ---
+
+  // 1. SHA-1 计算
+  const createSha1 = window.crypto && window.crypto.subtle
+    ? (data) => window.crypto.subtle.digest('SHA-1', data) // 使用 Web Crypto API
+    : (data) => Rusha.createHash().update(data).digest(); // https://github.com/srijs/rusha
+
+  // 2. 拼接 ArrayBuffer
+  const concatArrayBuffers = (buffers) => {
+    const totalLength = buffers.reduce((acc, b) => acc + b.byteLength, 0);
+    const result = new Uint8Array(totalLength);
+    let offset = 0;
+    for (const buffer of buffers) {
+      result.set(new Uint8Array(buffer), offset);
+      offset += buffer.byteLength;
+    }
+    return result.buffer;
+  };
+
+  // 3. ArrayBuffer 到 URL 安全 Base64 的转换
+  // 使用一个更健壮的 Base64 编码函数，避免大文件时出现栈溢出
+  const urlSafeBase64Encode = (buffer) => {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    // 对于小数据量 (21字节)，这种方式性能足够，且比 fromCharCode.apply 更安全
+    for (let i = 0; i < bytes.byteLength; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary).replace(/\//g, '_').replace(/\+/g, '-');
+  };
+
+  // 4. 带节流的进度回调包装器
+  let lastUpdateTime = 0;
+  const throttleInterval = 100; // 每 100ms 更新一次进度
+
+  const throttledProgressCallback = (progress) => {
+    if (!progressCallback) return;
+
+    const now = Date.now();
+    // 对于最后 100% 的进度，我们总是希望它被立即调用，以确保状态最终正确。
+    if (progress.percent === 100) {
+      setTimeout(() => progressCallback(progress), 0);
+      return;
+    }
+
+    if (now - lastUpdateTime > throttleInterval) {
+      lastUpdateTime = now;
+      // 使用 setTimeout 解耦，防止阻塞
+      setTimeout(() => progressCallback(progress), 0);
+    }
+  };
+
+  // --- 主逻辑 ---
+
+  if (file.size === 0) {
+    throttledProgressCallback({ computed: 0, total: 0, percent: 100 });
+    return 'Fto5o-5ea0sNMlW_75VgGJCv2AcJ';
+  }
+
+  const blockSize = 4 * 1024 * 1024; // 4MB
+
+  // --- 1. 小文件处理 (小于等于4MB) ---
+  if (file.size <= blockSize) {
+    const fileBuffer = await file.arrayBuffer();
+    const sha1Buffer = await createSha1(fileBuffer);
+    const prefix = new Uint8Array([0x16]);
+    const finalBuffer = concatArrayBuffers([prefix.buffer, sha1Buffer]);
+    const hash = urlSafeBase64Encode(finalBuffer);
+    throttledProgressCallback({ computed: file.size, total: file.size, percent: 100 });
+    return hash;
+  }
+
+  // --- 2. 大文件处理 (需要分块) ---
+  const sha1Results = []; // 存放每个完整块的 SHA-1 结果
+  let computed = 0;
+
+  // 尝试使用高性能的 BYOB 流模式
+  let reader;
+  try {
+    const stream = file.stream();
+    reader = stream.getReader({ mode: 'byob' });
+  } catch (error) {
+    // console.warn("BYOB reader not supported, falling back to slice() mode.", error);
+  }
+
+  if (reader) {
+    // --- 2a. 高性能 BYOB 流模式 ---
+    let buffer = new Uint8Array(blockSize); // 我们需要一个缓冲区来累积数据，直到达到 4MB
+    let offset = 0; // 当前缓冲区已填充的数据量
+
+    while (true) {
+      // BYOB 读取器需要一个视图 (view) 来写入数据
+      // 我们让它写入到我们累积缓冲区的剩余空间
+      // 每次都基于当前 buffer 和 offset 创建 view
+      const view = new Uint8Array(buffer.buffer, offset, buffer.byteLength - offset);
+      const { done, value } = await reader.read(view);
+
+      // 恢复对 buffer 的引用，因为 read() 后它可能被转移 (detached)
+      buffer = new Uint8Array(value.buffer);
+
+      if (done) {
+        // 文件读取完毕，处理最后一个不满 4MB 的块
+        if (offset > 0) {
+          const finalChunkView = new Uint8Array(buffer.buffer, 0, offset);
+          const chunkSha1 = await createSha1(finalChunkView);
+          // 最后一次计算文件分片时，不给计算进度，在所有计算都完成后，在给出计算进度
+          computed += finalChunkView.byteLength;
+          sha1Results.push(chunkSha1);
+        }
+        break;
+      }
+
+      // 更新偏移量，value.byteLength 是本次实际读取到的字节数
+      offset += value.byteLength;
+
+      // 检查缓冲区是否已满
+      if (offset === blockSize) {
+        // 缓冲区满了，计算整个块的 SHA-1
+        const chunkSha1 = await createSha1(buffer);
+        computed += buffer.byteLength;
+        throttledProgressCallback({ computed: computed, total: file.size, percent: computed / file.size * 100 });
+        sha1Results.push(chunkSha1);
+        offset = 0; // 重置偏移，复用 buffer
+      }
+    }
+    reader.releaseLock(); // 释放流的锁
+  }
+  else {
+    // --- 2b. 回退到 slice() 并行模式 ---
+    const blockCount = Math.ceil(file.size / blockSize);
+    const promises = [];
+
+    for (let i = 0; i < blockCount; i++) {
+      const start = i * blockSize;
+      const end = Math.min(start + blockSize, file.size);
+      const chunk = file.slice(start, end);
+
+      const promise = (async () => {
+        const buffer = await chunk.arrayBuffer();
+        const chunkSha1 = await createSha1(buffer);
+        computed += buffer.byteLength;
+        if (computed < file.size) {
+          // 最后一次计算文件分片时，不给计算进度，在所有计算都完成后，在给出计算进度
+          throttledProgressCallback({ computed: computed, total: file.size, percent: computed / file.size * 100 });
+        }
+        return chunkSha1;
+      })();
+      promises.push(promise);
+    }
+
+    // 使用 Promise.all 并行执行所有块的读取和 SHA-1 计算
+    const resolvedSha1s = await Promise.all(promises);
+    sha1Results.push(...resolvedSha1s);
+  }
+
+  // --- 3. 最终计算 ---
+  // 所有块的 SHA-1 计算完毕，进行最终的合并计算
+  const concatenatedSha1s = concatArrayBuffers(sha1Results);
+  const finalSha1 = await createSha1(concatenatedSha1s);
+  const prefix = new Uint8Array([0x96]);
+  const finalBuffer = concatArrayBuffers([prefix.buffer, finalSha1]);
+
+  const hash = urlSafeBase64Encode(finalBuffer);
+  throttledProgressCallback({ computed: file.size, total: file.size, percent: 100 });
+  return hash;
+}

@@ -3066,6 +3066,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rusha@^0.8.14:
+  version "0.8.14"
+  resolved "https://registry.npmjs.org/rusha/-/rusha-0.8.14.tgz#a977d0de9428406138b7bb90d3de5dcd024e2f68"
+  integrity sha512-cLgakCUf6PedEu15t8kbsjnwIFFR2D4RfL+W3iWFJ4iac7z4B0ZI8fxy4R3J956kAI68HclCFGL8MPoUVC3qVA==
+
 rxjs@^7.5.1:
   version "7.5.6"
   resolved "https://mirrors.cloud.tencent.com/npm/rxjs/-/rxjs-7.5.6.tgz"