如何通过 JavaScript 的 File API 在浏览器中实现文件的分片上传？-js教程-PHP中文网

如何通过 JavaScript 的 File API 在浏览器中实现文件的分片上传？

狼影

发布： 2025-10-02 16:06:02

原创

496人浏览过

答案：浏览器文件分片上传通过File API将大文件切片，利用FormData逐个发送，结合并发控制与断点续传提升稳定性。具体为：1. 使用File.slice()按字节分割文件；2. 每片携带索引、总片数、fileId等信息通过fetch上传；3. 限制并发请求数避免资源耗尽，使用Promise控制执行节奏；4. 服务端接收并存储分片，记录状态，待全部到位后合并。关键在于前后端协同、错误处理与进度管理。

如何通过 javascript 的 file api 在浏览器中实现文件的分片上传？

在浏览器中实现文件分片上传，核心是利用 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 = [];
<p>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);
<p>await fetch('/upload/chunk', {
method: 'POST',
body: formData
});
}

登录后复制

3. 客户端控制并发与重试逻辑

直接串行上传慢，全并发可能压垮连接。合理做法是限制并发数量。

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

查看详情

可使用 Promise 控制并发，比如最多同时上传 3 个分片。

简单并发控制示例：

async function uploadChunks(chunks, fileId, filename) {
  const concurrency = 3;
  const promises = [];
<p>for (let i = 0; i < chunks.length; i++) {
if (promises.length >= concurrency) {
await Promise.race(promises); // 等待最早完成的
}</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">const promise = uploadChunk(chunks[i], i, fileId, filename)
  .finally(() => {
    // 移除已完成的请求标记
    promises.splice(promises.indexOf(promise), 1);
  });

promises.push(promise);

登录后复制

}

// 等待剩余所有完成 await Promise.all(promises); }