vue 3 文件上传前必须通过 web worker 或 sparkmd5 增量计算内容哈希（如 sha-256），再调用 checkfile 预检：命中则秒传或断点续传，未命中或失败则降级全量分片上传，全程避免主线程阻塞且前后端算法严格统一。
Vue 3 中实现文件上传前的哈希值校验，核心是**基于文件内容生成唯一标识（如 SHA-256 或 MD5），并在上传发起前向服务端发起预检请求（checkFile）**。这一步直接支撑秒传、断点续传和去重逻辑，不是可选优化，而是关键前置环节。
哈希计算要避开主线程阻塞
大文件（如 1GB 视频）直接用 file.arrayBuffer() 读取会卡死 UI。必须采用流式或 Web Worker 方式：
- 前端推荐用 SparkMD5.ArrayBuffer 增量计算：按 2MB 分块读取，边读边追加哈希，不加载全量到内存
- 更优方案是把哈希计算移交到 Web Worker 或 Shared Worker，主线程完全无感知
- 避免使用
crypto.subtle.digest('SHA-256', await file.arrayBuffer())处理 >100MB 文件，易触发内存警告或超时
哈希值作为文件唯一 ID 使用
服务端不依赖文件名或路径，只认这个哈希——它由内容决定，相同文件必得相同哈希：
- 计算出哈希后，立即调用
api.checkFile({ hash })查询该文件是否已存在且完整上传 - 若返回
{ exists: true, url: 'xxx' }，直接跳过上传，走“秒传”流程 - 若返回
{ exists: true, uploadedChunks: [0,2,4] }，说明已传部分分片，进入断点续传模式 - 哈希字段命名建议统一为
fileId或contentHash，避免与后端字段冲突
校验失败或不一致时的处理策略
哈希校验不是“一锤定音”，需考虑边缘情况：
- 用户修改文件后快速重选（同一
File对象但内容不同）：浏览器可能复用缓存，应清空上次哈希缓存再重新计算 - 服务端返回哈希不匹配（如因存储损坏）：前端应记录错误并降级为普通分片上传，不中断流程
- 网络中断导致 checkFile 请求失败：设置合理重试（如 2 次），失败后默认走全量分片上传，保障可用性
- 不同算法混用风险：前端用 SHA-256，后端却用 MD5 校验 → 必须前后端约定统一哈希算法并写入接口文档
实际代码中关键调用链
典型流程是：选文件 → 启动 Worker 计算哈希 → 得到结果 → 调 checkFile 接口 → 根据响应分支处理：
-
不要在
@change回调里同步计算哈希，否则大文件会导致界面冻结数秒 - 使用
ref管理fileHash和uploadStatus，让 UI 实时响应校验状态（如显示“校验中…”） - checkFile 成功后，把
fileId注入后续每个分片请求的 query 或 header，服务端靠它定位归属文件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
