在开发中处理图片、视频上传时，你是否遇到过这些头疼问题：
上传进度卡在 99% 突然失败重头再来？
动辄几个 GB 的文件传输缓慢甚至超时崩溃？
服务器频繁报错，内存溢出拒绝服务？
传统表单上传方式在面对大文件时束手无策。本文将系统讲解大文件上传的核心解决方案，助你彻底告别上传噩梦！
🧩 一、核心解决方案拆解
分片上传（Chunking）
原理： 将大文件切割为多个小片段（如 5MB/片）。
实现： 前端使用 Blob.slice() 方法进行切片。
javascript
复制代码
function createFileChunks(file, chunkSize = 5 * 1024 * 1024) {
const chunks = [];
let start = 0;
while (start < file.size) {
chunks.push(file.slice(start, start + chunkSize));
start += chunkSize;
}
return chunks;
}
断点续传（Resumable Uploads）
原理： 中断后再次上传时跳过已传分片。
实现： 服务端记录已上传分片索引（如 Redis/MongoDB），前端通过接口查询续传点。
javascript
复制代码
// 查询服务端已上传分片
async function getUploadedChunks(fileHash) {
const res = await fetch(`/api/uploaded-chunks?hash=${fileHash}`);
return await res.json(); // 返回 [0, 1, 2] 等索引数组
}
文件完整性校验
原理： 确保上传前后文件内容一致。
实现：
前端计算文件 MD5/SHA（使用 spark-md5 库）
服务端合并分片后校验整体哈希值
javascript
复制代码
// 使用 Web Worker 计算 MD5，避免阻塞主线程
function calculateFileHash(file) {
return new Promise((resolve) => {
const worker = new Worker('hash-worker.js');
worker.postMessage(file);
worker.onmessage = (e) => resolve(e.data);
});
}
分片并发上传
原理： 同时上传多个分片提升速度。
实现： 利用 Promise.all 控制并发数（如 3-5 个）
javascript
复制代码
async function uploadChunksConcurrently(chunks, maxConcurrent = 3) {
const uploaded = []; // 存储成功上传的分片索引
const queue = [...chunks.entries()];
async function run() {
while (queue.length) {
const [index, chunk] = queue.shift();
await uploadSingleChunk(chunk, index);
uploaded.push(index);
}
}
// 启动 maxConcurrent 个并发任务
await Promise.all(Array(maxConcurrent).fill(null).map(run));
return uploaded;
}
🚀 二、关键优化技巧
上传进度精准显示
监听 axios 或原生 XHR 的 onprogress 事件
根据分片进度计算整体百分比
javascript
复制代码
function uploadSingleChunk(chunk, index) {
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', index);
return axios.post('/api/upload-chunk', formData, {
onUploadProgress: (e) => {
const percent = Math.round((e.loaded / e.total) * 100);
updateChunkProgress(index, percent); // 更新该分片进度
}
});
}
暂停/恢复上传
暂停： 取消未完成的 XHR 请求
恢复： 结合断点续传，从最后失败分片继续
文件秒传（Fast Upload）
前端计算文件哈希后询问服务端
若文件已存在，则直接标记上传成功
Web Workers 优化计算
将耗时的哈希计算放入 Worker 线程
避免主线程卡顿影响用户体验
⚙ 三、服务端配合要点
分片接收与存储
按文件唯一标识（如 MD5）创建临时目录
存储分片文件（如 chunks/{fileHash}/{index}.part）
分片合并
收到合并请求后，按索引顺序拼接所有分片
Node.js 示例：
javascript
复制代码
fs.writeFileSync(finalPath, ''); // 创建空文件
chunks.forEach(index => {
const chunkData = fs.readFileSync(`./chunks/${fileHash}/${index}`);
fs.appendFileSync(finalPath, chunkData); // 追加分片内容
});
清理机制
合并成功后删除临时分片
定时清理超时未合并的碎片
💎 总结与最佳实践
方案
解决问题
实现难度
效果
分片上传
超时、内存溢出
⭐⭐
大幅提升成功率
断点续传
网络中断重传
⭐⭐⭐
用户体验质的飞跃
文件校验
数据一致性
⭐⭐
确保业务数据准确
并发上传
上传速度慢
⭐
显著缩短等待时间
技术选型建议：
自有服务器开发：分片+断点续传+并发为核心
快速集成：七牛云、阿里云 OSS 等第三方服务（提供完整 SDK）
大文件上传已不再是前端"不可逾越之山"，通过合理的分片策略与断点续传机制，配合服务端稳健处理，完全可实现稳定高效的用户体验。关键在于分而治之的思想应用！
📚 进一步学习：
MDN - File API
axios 取消请求文档
云服务商对象存储 SDK（如 AWS S3、阿里云 OSS）