vue图片与大文件分片上传断点续传的核心是实现“状态可存、进度可查、中断可续”，需围绕文件唯一性（spark-md5全量哈希）、分片管理（带上下文的chunk级请求+重试）、服务端协同（verify接口校验已传分片）三方面设计，并通过localstorage持久化上传进度。

Vue 请求封装实现图片与大文件分片上传的断点续传，核心在于把“状态可存、进度可查、中断可续”落到请求层和业务逻辑层。不是单纯封装 axios，而是围绕文件唯一性、分片管理、服务端协同三块来设计。

文件唯一标识：用哈希值做上传身份证

断点续传的前提是能准确识别“这是哪个文件”。不能只靠文件名（可能重复），也不能只靠 size（不同文件可能同大小）。必须计算文件内容级哈希：

• 前端用 spark-md5 计算整个文件的 MD5（注意：不是每个分片单独算，是全量文件哈希）
• 计算过程建议在 Web Worker 中进行，避免阻塞主线程（尤其对 GB 级视频）
• 把 fileHash 作为后续所有请求的 key：查询已传分片、秒传校验、合并请求都带上它
• 小提示：若用户修改文件后又撤销（如文本编辑器里 Ctrl+Z 回到原内容），MD5 不变，仍可秒传——这是合理行为，不是 bug

分片上传请求封装：带上下文的 chunk 级请求

普通 axios 封装不适用于分片场景。你需要一个支持以下能力的上传函数：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 接收 { 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，避免残留垃圾数据

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！