核心思路是将大文件切片上传以提升稳定性和支持断点续传。1. 使用File.slice()将文件按5MB分块，携带fileHash、索引等元信息；2. 通过FormData并发上传分片，控制最大并发数防止资源耗尽；3. 上传前查询服务端已传分片，跳过重复上传实现断点续传；4. 所有分片完成后通知服务端按序合并，并删除临时文件。需注意分片顺序、错误重试与去重，结合进度条优化体验。
处理大文件上传和分片传输的核心思路是将大文件切分成多个小块，逐个上传，最后在服务端合并。这种方式可以避免内存溢出、提升上传稳定性，并支持断点续传。
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); // 等待至少一个完成
}
}
文心大模型
56
百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作
56
查看详情
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 java js 前端 json 浏览器 app ai 并发请求 JavaScript 切片 并发 promise spark
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容