答案：浏览器文件分片上传通过File API将大文件切片，利用FormData逐个发送，结合并发控制与断点续传提升稳定性。具体为：1. 使用File.slice()按字节分割文件；2. 每片携带索引、总片数、fileId等信息通过fetch上传；3. 限制并发请求数避免资源耗尽，使用Promise控制执行节奏；4. 服务端接收并存储分片，记录状态，待全部到位后合并。关键在于前后端协同、错误处理与进度管理。
在浏览器中实现文件分片上传，核心是利用 JavaScript 的 File API 将大文件切分成多个小块（Blob），然后逐个发送到服务器。这种方式能提升上传稳定性、支持断点续传，并减少内存占用。
1. 使用 File.slice() 进行文件切片
File 对象继承自 Blob，提供了 slice() 方法，可以按字节范围切割文件。
例如，将文件每 1MB 切一片：
- 获取文件输入元素中的 File 对象
- 设定分片大小（如 1024 * 1024 字节）
- 循环调用 slice(start, end) 生成 Blob 片段
const file = document.getElementById('fileInput').files[0];
const chunkSize = 1024 * 1024; // 1MB
const chunks = [];
for (let start = 0; start < file.size; start += chunkSize) {
const end = Math.min(file.size, start + chunkSize);
const chunk = file.slice(start, end);
chunks.push(chunk);
}
2. 构造 FormData 并上传每个分片
每个分片需携带必要信息（如索引、总片数、文件标识）以便服务端合并。
立即学习“Java免费学习笔记（深入）”；
使用 FormData 包装分片数据，通过 fetch 或 XMLHttpRequest 发送。
- 为每个分片创建一个请求
- 添加文件名、分片序号、唯一文件 ID 等元数据
- 可加入上传进度监听
async function uploadChunk(chunk, index, fileId, filename) {
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', index);
formData.append('total', chunks.length);
formData.append('fileId', fileId);
formData.append('filename', filename);
await fetch('/upload/chunk', {
method: 'POST',
body: formData
});
}
3. 客户端控制并发与重试逻辑
直接串行上传慢，全并发可能压垮连接。合理做法是限制并发数量。
可使用 Promise 控制并发，比如最多同时上传 3 个分片。
简单并发控制示例：async function uploadChunks(chunks, fileId, filename) {
const concurrency = 3;
const promises = [];
for (let i = 0; i < chunks.length; i++) {
if (promises.length >= concurrency) {
await Promise.race(promises); // 等待最早完成的
}
const promise = uploadChunk(chunks[i], i, fileId, filename)
.finally(() => {
// 移除已完成的请求标记
promises.splice(promises.indexOf(promise), 1);
});
promises.push(promise);}
// 等待剩余所有完成
await Promise.all(promises);
}
4. 服务端配合处理与合并
前端上传只是第一步，服务端需要：
- 接收每个分片并暂存（可用临时目录）
- 记录哪个文件的哪一片已上传
- 当所有片到位后自动或手动触发合并
- 提供接口查询上传状态（用于断点续传）
文件标识（fileId）建议前端生成唯一 ID（如 UUID），避免冲突。
基本上就这些。关键是把大文件拆开、带上上下文信息传、控制节奏、服务端接住并拼好。不复杂但容易忽略细节，比如错误重试和最后的合并触发机制。
