vue 3 大文件上传需分片处理：用 file.slice() 按 2–5mb 切片并带索引与偏移；用 spark-md5 流式计算文件指纹实现秒传与断点续传；控制 3–5 并发、失败重试 2–3 次；分层展示总进度与各分片状态。
Vue 3 中处理大文件上传，不能靠 FormData 一把梭。核心是把“上传一个大文件”这件事，拆解为“上传一堆小分片 + 协调状态 + 恢复断点”的工程任务。
分片切法要稳，别卡在内存和精度上
用 File.slice() 按字节范围切，不是读全再分。推荐分片大小设为 2–5MB：太小（如 1MB）请求多、开销大；太大（如 10MB）容错差、单次失败成本高。切片时带上索引、起始偏移、结束偏移，方便后端按序合并。
- 示例代码中常用
CHUNK_SIZE = 5 * 1024 * 1024（5MB） - 避免一次性
file.arrayBuffer()整体读取，尤其对 GB 级文件——容易触发浏览器内存警告甚至崩溃 - 切片后每个
Blob是独立对象，可单独构造 FormData 或转为 ArrayBuffer 传给加密库
文件指纹必须算，秒传和续传都靠它
不计算哈希，就等于没做断点续传的基础设施。用 spark-md5 增量计算整个文件 MD5（流式分块 digest），而不是加载全部内容再 hash。这个值作为文件唯一 ID，用于：
- 前端 localStorage 记录已上传分片索引（
{fileHash: ['0','2','5']}） - 上传前先发个 HEAD 请求问服务端：“这个 fileHash 的文件/分片是否存在？”
- 服务端命中已存分片则返回
skip: true，前端跳过该片；全命中即触发秒传
并发控制得有数，别让浏览器和后端一起崩
浏览器同域并发请求数有限（通常 6 个），盲目开 10 个分片并行，反而拖慢整体速度，还可能触发 Nginx 连接拒绝或 Node.js 内存溢出。建议设上限 3–5 个并发：
- 用 Promise 队列或
Promise.allSettled控制同时运行的上传 Promise 数量 - 每个分片请求带唯一 query 参数：
?chunkIndex=3&fileHash=abc123&chunkHash=def456 - 失败分片自动重试 2–3 次，超限则标记失败并暂停队列，等用户点击“重试”再继续
进度与状态要透明，用户才不焦虑
不要只显示“整体 65%”，要分层反馈：
- 总进度 = 已成功分片数 ÷ 总分片数 × 100%
- 每个分片有自己的上传状态（pending / uploading / success / failed），可展示在列表中
- 中断后恢复时，主动提示“检测到上次未完成上传，正在校验已传分片…”
- 结合
onUploadProgress（Axios）或XMLHttpRequest.upload.onprogress获取单分片实时字节进度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
