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 <p>上述代码展示了基础的切片逻辑。对于每一个生成的 <code>chunk</code>，我们获得了其起始位置和结束位置。在实际应用中，这些切片将被放入后续的上传流程中。需要注意的是，<code>slice</code> 方法返回的是一个新的 <code>Blob</code> 对象，它并不复制底层数据，因此性能开销极小。</p><h2>如何配置 Fetch 请求头以支持断点续传</h2><p>为了让服务端识别分片，必须在每次 <code>fetch</code> 调用时设置特定的头部信息。最关键的头部是 <code>Content-Range</code>，它的格式通常为 <code>bytes [start]-[end]/[total]</code>。此外，还需要传递文件的唯一 ID 和当前分片的索引，以便服务端知道这些碎片属于哪个文件以及它们的顺序。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11083" title="Java调试"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Java调试" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11083" title="Java调试" class="overflowclass">Java调试</a>
<p class="overflowclass">通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。
术语注解
JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议）
remote JVM：远程 Java 虚拟机
step through code：代码单步调试（步入 / 步过 / 步出调试）
inspect variables：变量查看 / 变量检视
stac</p>
</div>
<a rel="nofollow" href="/xiazai/skill11083" title="Java调试" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p><img src="https://img.php.cn/upload/article/001/242/473/179428994887051.png?x-oss-process=image/resize,p_40" alt="JavaScript Fetch API 怎么实现请求数据分片上传"></p><pre class="brush:php;toolbar:false;">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
uploadWithRetry(file.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE), i, totalChunks)
);
await Promise.all(promises);
这种并发策略显著缩短了总耗时，但需要注意不要超过浏览器的并发连接限制或服务端的处理能力。在实际生产环境中，建议使用专门的库如 tus-js-client 来处理复杂的分片、重试和状态同步逻辑。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
