核心思路是将大文件切片上传以提升稳定性和支持断点续传。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 < chunks.length; i++) {
const task = uploadChunk(chunks[i], i, fileHash, filename)
.then(res => results[i] = res)
.catch(err => { console.error(分片${i}上传失败, err); });
tasks.push(task);
if (tasks.length youjiankuohaophpcn= MAX_CONCURRENT) {
await Promise.race(tasks); // 等待至少一个完成
}}
Mfkiqpl旅行社旅游线路预订程序
升级报告：增加动态新闻功能后台添加，删除，编辑，支持UBB代码，支持上传片及文件。 增加我要入团功能散客可以自由选择加入贵社最近要出发的团队。 增加线路置顶功能置顶后的线路永远显示在最前面。 增加同行报价功能管理员在后台添加同行用户，同行用户登录后可查看贵社线路对同行的报价。同行报价在添加线路中一并添加。（感谢网友拽哥提出修改意见） 增加更多线路显示的分页功能方便大型旅行社由于线路过多而引起的部分
下载
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 })
});
服务端按顺序读取分片文件，写入最终文件，完成后删除临时分片。
基本上就这些。关键在于分片合理、状态可查、支持恢复。实现起来不复杂但容易忽略细节，比如分片顺序、错误重试、文件去重等。配合进度条显示（通过已上传分片数 / 总数）体验会更好。
