核心思路是将大文件切片上传以提升稳定性和支持断点续传。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);const res = await fetch('/upload/chunk', {method: 'POST',body: formData});return res.json();}
控制并发上传数量（例如最多同时上传4个分片）：
async function uploadChunks(chunks, fileHash, filename) { const MAX_CONCURRENT = 4; const tasks = []; const results = [];for (let i = 0; i results[i] = res).catch(err => { console.error(分片${i}上传失败, err); });
tasks.push(task);if (tasks.length >= MAX_CONCURRENT) { await Promise.race(tasks); // 等待至少一个完成}
}
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中，如何处理大文件的上传与分片传输？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527507.html
微信扫一扫 
支付宝扫一扫 
