JavaScript大文件分片上传需手动切片、按序上传、服务端合并：用Blob.slice切分文件，控制并发上传分片，后端提供分片接收、合并及预检接口，并支持断点续传与错误重试。
JavaScript 中用 Fetch API 实现大文件分片上传，核心是**手动切分文件、按序上传分片、服务端合并**。Fetch 本身不支持断点续传或自动分片，需前端控制切片逻辑和上传流程，同时配合后端接口设计。
1. 文件切片（Blob.slice）
使用 Blob.prototype.slice() 将大文件按固定大小（如 5MB）切分为多个 Blob 片段，注意兼容性（现代浏览器均支持）：
- 推荐使用
file.slice(start, end)，参数为字节偏移量（不是数组索引） - 避免直接用
Array.from(file)或file.arrayBuffer()全量读取，会阻塞主线程且内存占用高 - 示例：每片 5MB →
const chunkSize = 5 * 1024 * 1024;
2. 分片上传与并发控制
每个分片单独发起 Fetch 请求，建议限制并发数（如 3~5 个），防止请求堆积或服务端拒绝：
- 用
Promise.allSettled(chunks.map(...))或手写队列控制并发 - 每个请求携带唯一标识：分片序号（
chunkIndex）、总片数（totalChunks）、文件唯一 ID（如 hash 或 UUID） - 推荐将分片数据作为
FormData上传，便于服务端解析：formData.append('chunk', blob, `chunk_${index}`)
3. 服务端需支持的接口能力
仅靠前端无法完成分片上传，后端必须提供配套支持：
立即学习“Java免费学习笔记（深入）”；
- 接收单个分片的上传接口（如
POST /upload/chunk），返回成功状态及分片确认信息 - 合并接口（如
POST /upload/merge），传入文件名、hash、总片数等，由服务端校验并拼接存储 - 可选：预检接口（
GET /upload/check?fileId=xxx）用于断点续传，返回已上传的分片序号列表
4. 断点续传与错误重试
网络不稳定时需记录已成功上传的分片，跳过重复上传：
- 上传前先调用预检接口，获取已上传的
uploadedChunks数组 - 仅对未上传的分片发起请求；失败分片可单独重试（带指数退避）
- 避免在 Fetch 中盲目设置
timeout，改用AbortController主动中止 + 重试逻辑 - 上传完成后调用合并接口，服务端校验所有分片是否齐全，缺失则返回错误
不复杂但容易忽略细节：文件 hash 计算（推荐 Web Crypto API 的 crypto.subtle.digest()）、分片序号从 0 还是 1 开始要前后端约定一致、Content-Type 在 FormData 中由浏览器自动设置无需手动指定。
