JavaScript 中 Fetch 怎么实现文件上传的分片处理-js教程-PHP中文网

fetch不直接支持分片上传，需结合blob.slice()手动分块：按2mb切分文件，逐个fetch上传并传入序号、总数、文件hash等元数据，前后端协同完成接收、校验与合并。

javascript 中 fetch 怎么实现文件上传的分片处理

Fetch 本身不直接支持分片上传，但可以结合 Blob 的 slice() 方法 + 手动分块逻辑 + 后端配合，实现可控的文件分片上传。

分片上传的核心思路

把大文件按固定大小（如 2MB）切分成多个 Blob 片段，逐个用 Fetch 发送，并携带当前分片序号、总分片数、唯一文件标识（如文件 hash 或 UUID），让后端能正确合并。

前端负责计算分片、生成唯一标识、控制并发和重试
后端需提供「接收单片」「校验完整性」「合并文件」三个接口
推荐使用文件内容的 hash（如 spark-md5）作为文件唯一 ID，避免重复上传相同文件

关键代码：切片 + 并发上传

用 file.slice(start, end) 提取片段，每个片段单独发起 Fetch 请求：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

const chunkSize = 2 * 1024 * 1024; // 2MB
const chunks = [];
for (let i = 0; i const uploadPromises = chunks.map((chunk, index) => {
const formData = new FormData();
formData.append('chunk', chunk, <code>chunk-${index}</code>);
formData.append('chunkIndex', index);
formData.append('totalChunks', chunks.length);
formData.append('fileId', fileId); // 如通过 spark-md5 计算得出<p>return fetch('/upload/chunk', {
method: 'POST',
body: formData,
}).then(res => {
if (!res.ok) throw new Error(<code>Upload failed at chunk ${index}</code>);
return res.json();
});
});</p><p>await Promise.all(uploadPromises);
</p>