JSFileAPI实现分片上传教程

本文深入解析了如何利用 JavaScript 的 File API 实现高效、稳定的浏览器端大文件分片上传，涵盖从文件切片（File.slice）、FormData 构建与元数据封装、并发请求控制（如 Promise.race + 限流）、断点续传支持，到服务端分片接收、状态管理与最终合并的完整链路，强调前后端协同、错误重试、进度反馈和资源优化等关键实践细节，为构建生产级文件上传功能提供清晰可行的技术方案。

在浏览器中实现文件分片上传，核心是利用 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 并上传每个分片

每个分片需携带必要信息（如索引、总片数、文件标识）以便服务端合并。

使用 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），避免冲突。

基本上就这些。关键是把大文件拆开、带上上下文信息传、控制节奏、服务端接住并拼好。不复杂但容易忽略细节，比如错误重试和最后的合并触发机制。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。