javascript文件分片上传与断点续传的核心是前后端协同维护分片状态账本:前端用spark-md5增量计算文件hash作为唯一id,切片上传前查询服务端已传索引,跳过已传分片;后端提供状态查询、分片上传、合并三个接口,并校验hash、清理临时文件。

JavaScript 实现文件分片上传与断点续传,核心在于:前端将大文件切片、记录已上传块、请求时携带唯一标识(如文件 hash),服务端配合校验、合并与状态查询。关键不是“能不能”,而是“如何协同后端设计好协议”。
1. 前端如何生成文件唯一标识并分片
用 File 对象 + Blob.slice() 切片,同时用 Web Crypto API 计算文件整体 hash(如 SHA-1 或 MD5)作为文件 ID。注意:全量计算 hash 会阻塞主线程,建议用 Web Worker 或分块增量哈希(如 spark-md5)。
- 避免用文件名或修改时间判断唯一性——重名或覆盖后无法识别同一文件
- 推荐使用
spark-md5的增量模式:逐片读取并更新 hash,内存友好 - 每片带上参数:
{ fileId, chunkIndex, totalChunks, chunkSize, fileHash }
2. 上传逻辑需支持“跳过已传分片”
上传前先发一个 GET /upload/status?fileId=xxx 请求,获取服务端已存的已上传分片索引列表(如 [0,1,3,4])。只对缺失的分片发起 POST 上传。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 每次上传分片用
FormData提交:chunk(Blob)、fileId、chunkIndex等字段 - 响应中返回成功状态和分片索引,前端本地缓存已传列表(可用 localStorage 或 IndexedDB 持久化)
- 用户暂停/刷新页面后,重新拉取状态即可续传,无需重头开始
3. 后端必须提供三个基础接口
前端能力再强,没有后端配合就只是单机玩具。这三个接口是断点续传的骨架:
-
查询上传状态:
GET /upload/status?fileId=xxx→ 返回已上传的 chunkIndex 数组 -
上传分片:
POST /upload/chunk→ 接收单个分片 + 元数据,存为临时文件(如xxx_0.part),并记录索引 -
合并分片:
POST /upload/merge→ 收到所有分片后,按序拼接、校验总 hash、保存为最终文件,清理临时碎片
4. 处理异常与用户体验细节
网络抖动、页面关闭、浏览器崩溃是常态,不能假设“一次成功”。需要主动兜底:
- 上传失败的分片自动重试(建议最多 3 次,带指数退避)
- 监听
beforeunload事件,把当前上传进度(fileId + 已传索引)存入 localStorage - 恢复时优先读 localStorage,再比对服务端状态,防止本地数据陈旧
- 显示实时进度(已传/总数)、预计剩余时间(基于平均速度估算),提升感知可靠性
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










