vue 3断点续传核心是前端控制流程与后端协同校验，通过文件哈希唯一标识、切片上传、状态同步、分片重试及服务端合并实现可记录、可跳过、可重试的上传机制。
Vue 3 中实现文件上传的断点续传，核心不是“监听中断再恢复”，而是主动把上传过程拆解为可记录、可跳过、可重试的独立单元。关键在于前端控制流程 + 后端协同校验，而不是依赖浏览器自动续传。
文件切片与唯一标识
选中文件后不急着上传，先做两件事：
- 用 SparkMD5 或 Web Crypto API（如 SHA-256）异步计算整个文件哈希值，作为该文件全局唯一指纹
- 调用 File.slice() 按固定大小（如 5MB）切片，生成带序号的分片数组，每个分片包含起始位置、索引和二进制内容
哈希值用于后续向服务端查询“这个文件哪些片已存在”，避免重复上传，也为秒传提供依据。
上传前状态同步
发起上传前，必须先和服务端确认当前进度：
- 前端携带文件哈希发起一次 初始化请求（如
GET /upload/status?hash=xxx） - 后端根据哈希查找已保存的分片记录，返回已上传的分片索引列表（如
[0,1,2,5,6]） - 前端据此过滤出待上传分片，只发起缺失部分的请求
这一步是断点续传成立的前提——没有状态同步，就谈不上“续”。
分片上传与失败重试
每个分片上传都是独立的 POST 请求，需携带必要元数据：
- fileHash：用于服务端定位所属文件
- chunkIndex：当前分片序号，服务端按序存储
- totalChunks：总分片数，便于合并时校验完整性
- chunkHash（可选）：单个分片的 MD5，服务端可做校验防损坏
上传失败时，仅重试对应分片，不影响其他分片；成功后更新本地 uploadedChunks 列表，并持久化到 localStorage 或 IndexedDB，防止页面刷新丢失状态。
合并与完成确认
所有分片上传完成后，触发合并请求：
- 前端调用
POST /upload/merge，传入fileHash和fileName - 后端按序读取临时分片，拼接成完整文件，落盘并删除临时碎片
- 合并成功后，清除本地缓存的状态数据，上传流程闭环
若合并失败（如缺片、校验不通过），前端可再次拉取状态，补传遗漏分片，真正实现“断点可续”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
