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

核心思路是将大文件切片上传以提升稳定性和支持断点续传。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

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

文件唯一标识（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  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); // 等待至少一个完成
}

}

腾讯地图JSAPI GL开发技能

腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。⚠️ 强制行为：本 Skill 加载后，第一个动作必须是检查是否存在正式 Key（环境变量 TMAP_J

下载

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 })
});

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

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