JavaScript文件上传支持分片和断点续传需前后端协同：先用FormData+fetch实现基础上传；再按固定大小切片、附加chunkIndex/totalChunks/fileId上传；断点续传依赖fileId（推荐内容hash）查询已传分片并跳过，最后合并。
JavaScript 实现文件上传，尤其是支持分片和断点续传，核心在于把大文件切分成小块、逐个上传、记录进度，并在中断后能从上次位置继续。不依赖后端配合就无法真正实现断点续传，前端只是控制逻辑，关键靠前后端协同设计。
基础文件上传（FormData + fetch）
这是起点，所有高级功能都基于它：
- 用 input[type="file"] 获取 File 对象
- 创建 FormData，append 文件或字段
- 用 fetch 或 XMLHttpRequest 发送，监听 upload.onprogress 获取进度
示例片段：
const file = input.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
});
手动实现分片上传
把文件按固定大小（如 1MB）切片，每片单独上传，带序号和唯一标识（如文件 hash）：
立即学习“Java免费学习笔记（深入）”；
- 用 file.slice(start, end) 提取 Blob 片段
- 每片 FormData 中附加参数：chunkIndex、totalChunks、fileId（推荐用文件内容 hash，如 spark-md5）
- 后端收到后暂存分片，收到全部后再合并
注意：浏览器中计算大文件 hash 耗时，建议用 Web Worker 避免阻塞 UI。
断点续传的关键机制
断点续传不是“自动恢复”，而是“查询+跳过已传”：
- 上传前先发请求到后端（如 GET /upload/status?fileId=xxx），询问哪些分片已存在
- 后端根据 fileId 返回已上传的 chunkIndex 列表
- 前端只上传缺失的分片，按序补全
- 上传完成后再触发合并请求（如 POST /upload/merge）
可靠性依赖：fileId 必须稳定（不能用 name + size，推荐 content-based hash），且后端需持久化分片状态（如存数据库或 Redis）。
实用建议与避坑点
真实项目中容易忽略但影响体验的细节：
- 并发控制：不要同时上传 100 个分片，用 PromisePool 限制并发数（如 3~5 个）
- 失败重试：单片上传失败应指数退避重试（如 1s、2s、4s），并允许用户取消
- 暂停/恢复：通过 abortController.abort() 中断请求；恢复时重新查已传状态，再继续
- 浏览器兼容性：File.prototype.slice 在旧版 Safari 有差异，建议用 file.slice || file.webkitSlice || file.mozSlice
不复杂但容易忽略。
