在阿里技术面试中，“如何实现大文件上传”是考察候选人前端工程化能力的经典问题。随着企业级应用中视频处理、云存储等场景的普及，单个文件大小已从MB级跃升至GB级。传统的表单上传方式在遇到大文件时，往往面临网络超时、上传中断、服务器压力过大三大难题。如何实现稳定高效的大文件上传，已成为现代Web开发的核心竞争力之一。
一、大文件上传的核心问题剖析
1.1 传统上传方式的局限性
普通表单上传采用multipart/form-data格式传输文件，这种方式存在三个致命缺陷：
- 网络容错性差：单次请求失败需重新上传
- 内存占用高：服务端需完整加载文件流
- 传输效率低：无法利用浏览器并发能力
1.2 大文件上传的技术诉求
通过阿里云OSS等平台实践可知，成熟的大文件上传方案需满足：
- 支持分片上传（每片建议100MB）
- 实现断点续传能力
- 具备并发上传机制
- 提供完整性校验（MD5/SHA256）
二、大文件上传实现四步法
2.1 前端分片处理
通过Blob.slice()方法切割文件：
const chunkSize = 100 1024 1024; // 100MB分片
let chunks = [];
for(let i=0; i<Math.ceil(file.size/chunkSize); i++){
chunks.push(file.slice(ichunkSize, (i+1)chunkSize));
}2.2 分片元数据管理
生成文件唯一标识fileHash（MD5），建立分片索引表：
- 文件名称+大小+最后修改时间生成唯一ID
- 使用Web Worker计算文件哈希
- 通过IndexedDB缓存分片信息
2.3 分片并发上传
采用Promise.all实现并发控制：
const MAX_CONCURRENT = 3; // 3个并发通道
const uploadChunk = async (chunk, index) => {
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('hash', fileHash);
formData.append('index', index);
return axios.post('/upload', formData);
};
// 使用p-limit控制并发数
const chunksPromises = chunks.map((chunk,index) =>
limit(() => uploadChunk(chunk, index))
);
await Promise.all(chunksPromises);2.4 后端分片合并
服务端需要完成三个关键操作：
- 碎片存储：临时保存分片文件
- 完整性校验：验证分片数量和顺序
- 合并写入：使用fs.createWriteStream合并文件
三、进阶优化策略
3.1 秒传技术实现
通过文件指纹比对实现秒传：
- 前端计算文件哈希值
- 服务端查询文件是否存在
- 返回已存在文件的访问地址
3.2 智能重试机制
采用指数退避算法应对网络波动：
const retry = async (fn, retries=3) => {
try {
return await fn();
} catch(err) {
if(retries <= 0) throw err;
await new Promise(r => setTimeout(r, 1000 (4 retries)));
return retry(fn, retries 1);
}
};3.3 上传进度监控
利用axios的onUploadProgress事件：
axios.post('/upload', formData, {
onUploadProgress: progress => {
const percent = Math.round(
(progress.loaded / progress.total) 100
);
console.log(`上传进度: ${percent}%`);
}
});四、推荐开发工具
enlarge-file-upload库提供开箱即用的解决方案：
- 支持Vue2/Vue3/React/JQuery
- 内置断点续传、错误重试策略
- 自动分片与并发控制
安装命令：npm install enlarge-file-upload
五、总结
大文件上传方案的核心在于分而治之的思想，通过分片、并发、断点续传等技术手段，将原本不可控的大文件传输转化为可管理的过程。阿里云OSS的实践经验表明，合理设置分片大小（推荐100MB）、采用高效的哈希算法、完善的错误处理机制，可使上传成功率提升至99.9%以上。掌握这些技术要点，不仅能从容应对技术面试，更能为实际业务开发提供可靠保障。
正文完
