在JavaScript中，如何处理大文件的上传与分片传输？-js教程-PHP中文网

在JavaScript中，如何处理大文件的上传与分片传输？

betcha

发布： 2025-10-07 22:25:01

原创

473人浏览过

核心思路是将大文件切片上传以提升稳定性和支持断点续传。1. 使用File.slice()将文件按5MB分块，携带fileHash、索引等元信息；2. 通过FormData并发上传分片，控制最大并发数防止资源耗尽；3. 上传前查询服务端已传分片，跳过重复上传实现断点续传；4. 所有分片完成后通知服务端按序合并，并删除临时文件。需注意分片顺序、错误重试与去重，结合进度条优化体验。

在javascript中，如何处理大文件的上传与分片传输？

处理大文件上传和分片传输的核心思路是将大文件切分成多个小块，逐个上传，最后在服务端合并。这种方式可以避免内存溢出、提升上传稳定性，并支持断点续传。

1. 文件分片（Chunking）

利用 File.slice() 方法将大文件切分为固定大小的块（如 5MB），这样浏览器不会因为一次性读取大文件而卡顿。

示例代码：

function createChunks(file, chunkSize = 5 * 1024 * 1024) {
  const chunks = [];
  for (let start = 0; start < file.size; start += chunkSize) {
    const chunk = file.slice(start, start + chunkSize);
    chunks.push(chunk);
  }
  return chunks;
}

登录后复制

每个分片可携带元信息，如：

立即学习“Java免费学习笔记（深入）”；

文件唯一标识（fileHash，可通过文件名+大小+修改时间生成）
当前分片索引（index）
总分片数（totalChunks）
分片校验码（可选，如MD5）

2. 分片上传与并发控制

使用 FormData 和 fetch 发送每个分片，建议限制并发请求数量，防止资源耗尽。

async function uploadChunk(chunk, index, fileHash, filename) {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('index', index);
  formData.append('fileHash', fileHash);
  formData.append('filename', filename);
<p>const res = await fetch('/upload/chunk', {
method: 'POST',
body: formData
});
return res.json();
}</p>

登录后复制

控制并发上传数量（例如最多同时上传4个分片）：

async function uploadChunks(chunks, fileHash, filename) {
  const MAX_CONCURRENT = 4;
  const tasks = [];
  const results = [];
<p>for (let i = 0; i < chunks.length; i++) {
const task = uploadChunk(chunks[i], i, fileHash, filename)
.then(res => results[i] = res)
.catch(err => { console.error(<code>分片${i}上传失败</code>, err); });</p><pre class='brush:php;toolbar:false;'>tasks.push(task);

if (tasks.length >= MAX_CONCURRENT) {
  await Promise.race(tasks); // 等待至少一个完成
}

登录后复制

}

易森网络企业版

如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld

查看详情

await Promise.allSettled(tasks); return results; }

3. 断点续传与状态查询

上传前先向服务端请求已上传的分片列表，跳过已完成的部分。

流程如下：

客户端计算文件哈希（可用 spark-md5 或 FileReader 读取部分数据生成）
发送文件信息到服务端：/upload/check?fileHash=xxx
服务端返回已接收的分片索引数组
前端只上传缺失的分片

示例请求：

const res = await fetch(`/upload/check?fileHash=${fileHash}`);
const { uploadedChunks } = await res.json();
// 过滤掉已上传的分片再执行上传

登录后复制

4. 服务端合并分片

所有分片上传完成后，客户端通知服务端合并：

await fetch('/upload/merge', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ fileHash, filename, totalChunks })
});

登录后复制

服务端按顺序读取分片文件，写入最终文件，完成后删除临时分片。

基本上就这些。关键在于分片合理、状态可查、支持恢复。实现起来不复杂但容易忽略细节，比如分片顺序、错误重试、文件去重等。配合进度条显示（通过已上传分片数 / 总数）体验会更好。

以上就是在JavaScript中，如何处理大文件的上传与分片传输？的详细内容，更多请关注php中文网其它相关文章！