Vue图片与大文件分片上传断点续传的核心是实现“状态可存、进度可查、中断可续”，需围绕文件唯一性（spark-md5全量哈希）、分片管理（带上下文的chunk级请求+重试）、服务端协同（verify接口校验已传分片）三方面设计，并通过localStorage持久化上传进度。
Vue 请求封装实现图片与大文件分片上传的断点续传，核心在于把“状态可存、进度可查、中断可续”落到请求层和业务逻辑层。不是单纯封装 axios，而是围绕文件唯一性、分片管理、服务端协同三块来设计。
文件唯一标识：用哈希值做上传身份证
断点续传的前提是能准确识别“这是哪个文件”。不能只靠文件名（可能重复），也不能只靠 size（不同文件可能同大小）。必须计算文件内容级哈希：
- 前端用 spark-md5 计算整个文件的 MD5（注意：不是每个分片单独算，是全量文件哈希）
- 计算过程建议在 Web Worker 中进行，避免阻塞主线程（尤其对 GB 级视频）
- 把 fileHash 作为后续所有请求的 key：查询已传分片、秒传校验、合并请求都带上它
- 小提示：若用户修改文件后又撤销（如文本编辑器里 Ctrl+Z 回到原内容），MD5 不变，仍可秒传——这是合理行为，不是 bug
分片上传请求封装：带上下文的 chunk 级请求
普通 axios 封装不适用于分片场景。你需要一个支持以下能力的上传函数：
- 接收 { file, fileHash, index, chunk } 四要素，确保每次请求携带完整上下文
- 自动拼接后端分片接口 URL，例如 /api/upload/chunk?fileHash=xxx&index=5
- 使用 FormData 提交 chunk，并附带额外元数据（size、totalChunks、fileName 等）
- 内置重试机制（如失败后间隔 1s 重试 2 次），但重试前先检查该分片是否已被服务端接收（避免重复写）
- 返回 Promise 并 resolve({ index, status: 'success' })，便于上层聚合状态
断点续传控制逻辑：上传前先“摸底”
真正的断点续传不是“边传边记”，而是“传前确认”。关键一步是上传主流程开始前，发起一次轻量 GET 请求：
立即学习“前端免费学习笔记（深入）”；
- 请求 /api/upload/verify?fileHash=xxx，服务端返回已存在的分片索引数组，例如 [0,1,2,4,5]
- 前端拿到后，过滤出缺失的索引：missingIndices = Array.from({length: totalChunks}).map((_, i) => i).filter(i => !uploaded.includes(i))
- 只对 missingIndices 发起分片上传，跳过已存在部分——这就是断点续传的本质
- 注意：该 verify 接口必须原子性响应，不能因并发上传导致状态错乱（服务端需加锁或用 Redis 原子操作）
状态持久化：让页面刷新也不丢进度
用户刷新页面或意外关闭标签页，已传分片不能白传。需要将上传中间态存到本地：
- 使用 localStorage 存储 { fileHash: { uploaded: [0,1,2], total: 12, fileName: "xxx.mp4" } }
- 每次上传前先读取对应 fileHash 的记录，结合 verify 结果做二次去重
- 每成功上传一个分片，立即更新 localStorage（注意防抖，避免高频写入）
- 上传完成或取消后，清理对应 key，避免残留垃圾数据
不复杂但容易忽略
