javascript fetch api 本身不支持直接分片上传，需要手动将文件按字节范围切割为 blob 对象，并通过循环发送多个独立的 post 请求来实现。具体做法是设定每个分片的大小（例如 1mb），利用 file.slice() 方法提取数据，在每次请求中通过 formdata 或原始 blob 传输，并在 http 头中携带 content-range 和 content-type 以标识当前分片的序号与总大小。
如何计算分片数量并生成切片
实现分片上传的第一步是将大文件切分为固定大小的块。这通常通过遍历文件的总长度，使用 slice(start, end) 方法截取数据来完成。我们需要计算总共需要多少个请求，并为每个切片分配唯一的索引，以便服务端进行重组。
const file = document.getElementById('fileInput').files[0];
const CHUNK_SIZE = 1 * 1024 * 1024; // 1MB
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
for (let i = 0; i < totalChunks; i++) {
const start = i * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, file.size);
const chunk = file.slice(start, end);
console.log(`Chunk ${i}: size ${chunk.size}`);
}
上述代码展示了基础的切片逻辑。对于每一个生成的 chunk，我们获得了其起始位置和结束位置。在实际应用中，这些切片将被放入后续的上传流程中。需要注意的是，slice 方法返回的是一个新的 Blob 对象，它并不复制底层数据，因此性能开销极小。
立即学习“Java免费学习笔记（深入）”；
如何配置 Fetch 请求头以支持断点续传
为了让服务端识别分片，必须在每次 fetch 调用时设置特定的头部信息。最关键的头部是 Content-Range，它的格式通常为 bytes [start]-[end]/[total]。此外，还需要传递文件的唯一 ID 和当前分片的索引，以便服务端知道这些碎片属于哪个文件以及它们的顺序。
async function uploadChunk(chunk, index, total) {
const formData = new FormData();
formData.append('file', chunk);
formData.append('index', index);
formData.append('total', total);
formData.append('filename', 'example.txt');
const headers = {
'Content-Range': `bytes ${index * CHUNK_SIZE}-${Math.min((index + 1) * CHUNK_SIZE, file.size) - 1}/${file.size}`,
'X-File-ID': 'unique-file-id-123'
};
await fetch('/upload', {
method: 'POST',
headers: headers,
body: formData
});
}
在上面的代码中，Content-Range 的值是根据当前分片的索引动态计算的。服务端接收到这个头部后，可以判断该分片是否已经存在，从而实现断点续传。如果某个分片上传失败，客户端可以重新发送该特定分片，而不必重传整个文件。
如何处理并发上传与错误重试
为了提高上传速度，通常会并发上传多个分片，而不是串行等待。可以使用 Promise.all 或限制并发数的队列来管理这些请求。同时，必须处理网络错误，对失败的请求进行重试。以下代码演示了简单的并发上传与重试机制。
async function uploadWithRetry(chunk, index, maxRetries = 3) {
for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
await uploadChunk(chunk, index, totalChunks);
return true;
} catch (error) {
if (attempt === maxRetries) throw error;
console.warn(`Retry ${attempt + 1} for chunk ${index}`);
}
}
}
// 并发上传所有分片
const promises = Array.from({ length: totalChunks }, (_, i) =>
uploadWithRetry(file.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE), i, totalChunks)
);
await Promise.all(promises);
这种并发策略显著缩短了总耗时，但需要注意不要超过浏览器的并发连接限制或服务端的处理能力。在实际生产环境中，建议使用专门的库如 tus-js-client 来处理复杂的分片、重试和状态同步逻辑。
