你是否遇到过这样的场景？想上传一个几GB的视频，结果进度条卡在99%不动了，或者传了半小时突然断网，又得重新开始。别慌，今天我就带你掌握大文件上传的「黑科技」，让你的「巨无霸」文件也能像坐高铁一样快速、稳定地传输！
一、大文件上传的「痛点」：为什么直接传不行？
在说解决方案之前，我们先聊聊为什么大文件直接上传会「翻车」。想象一下，你要搬一个100斤的大箱子，直接扛着走肯定累得气喘吁吁，还容易摔倒。同样的道理，大文件直接上传也有三大「拦路虎」：
网络不稳定：稍微有点波动就会导致整个上传失败
服务器压力大：一次性接收大量数据容易「罢工」
用户体验差：等待时间长，进度不明确
那怎么办呢？答案就是：化整为零，各个击破！
二、大文件上传的「正确姿势」：分片上传
分片上传就像是把100斤的大箱子拆成10个10斤的小箱子，一个个搬过去，既轻松又安全。下面我们来看看前端和后端分别是怎么配合完成这个「拆箱-搬运-组装」过程的。
前端：「拆箱工」的自我修养
作为「拆箱工」，前端的任务就是把大文件切割成多个小片段，然后逐一上传。具体来说，需要完成这五个步骤：
步骤一：「验货」------读取文件资源
首先，我们需要通过让用户选择要上传的文件，然后获取到对应的File对象。这个对象就像是我们要搬运的「大箱子」。
步骤二：「拆箱」------切割文件
这是最关键的一步！我们可以使用file.slice(start, end)方法来切割文件。就像是用一把「魔法剪刀」，把大文件按照我们设定的大小（比如1MB）切成一个个小的Blob对象。
javascript
复制代码
// 举个例子：把文件切成1MB大小的片段
const chunkSize = 1024 * 1024; // 1MB
const chunks = [];
for (let i = 0; i < file.size; i += chunkSize) {
const chunk = file.slice(i, i + chunkSize);
chunks.push(chunk);
}
步骤三：「打包」------转换为FormData
切割好的Blob对象需要「打包」成服务器能识别的格式。这里我们使用FormData，就像是给每个小片段套上一个「快递袋」，方便运输和识别。
javascript
复制代码
const formData = new FormData();
formData.append('chunk', chunk); // 放入切割好的片段
formData.append('chunkIndex', i); // 标记片段序号
formData.append('fileName', file.name); // 记录原始文件名
步骤四：「发货」------循环上传
接下来，我们就可以循环遍历所有的片段，一个个发送到服务器了。这个过程就像是快递员挨家挨户送快递一样。
步骤五：「等签收」------等待所有请求完成
为了确保所有片段都上传成功，我们可以使用Promise.all方法。它就像是一个「快递中心」，会等所有快递都签收后，再通知我们任务完成。
javascript
复制代码
const uploadPromises = chunks.map((chunk, index) => {
return uploadChunk(chunk, index, file.name);
});
Promise.all(uploadPromises).then(() => {
console.log('所有片段上传完成！');
// 可以通知服务器进行合并了
});
后端：「组装工」的工作日常
前端把「零件」送过来了，后端的「组装工」就要开始工作了。具体来说，后端需要完成这四个步骤：
步骤一：「接货」------接收FormData
后端接收到前端传过来的FormData后，默认会把它读成Buffer格式。这就像是收到了一堆「快递包裹」，需要拆开检查。
步骤二：「验货」------解析Buffer
接下来，后端需要对Buffer进行解析，从中提取出我们需要的文件片段、片段序号等信息。就像是拆开快递包裹，看看里面是什么东西。
步骤三：「暂存」------保存片段
解析完成后，后端会把每个片段单独保存到服务器的某个临时目录下。就像是把拆下来的零件放到一个工作台上，等待组装。
步骤四：「组装」------合并文件
当收到前端的「合并请求」后，后端会按照片段的序号，将所有的小片段按顺序合并成一个完整的文件。就像是把所有零件按照图纸组装成最终的产品。
三、大文件上传的「进阶技能」：断点续传
分片上传解决了大文件上传的基本问题，但还有一个「终极Boss」需要挑战：网络断开怎么办？
想象一下，你搬了9个箱子，就差最后一个了，结果突然下雨了，你不得不回家。等雨停了，难道你还要重新搬10个箱子吗？当然不用！这时候，「断点续传」这个「超级技能」就派上用场了。
断点续传的「魔法原理」
断点续传的原理其实很简单，就像是记住你搬到第几个箱子了：
记录进度：每次上传成功一个片段，前端或后端都会记录下来
查询进度：当再次点击上传按钮时，前端会先向服务器发送一个「查询请求」，询问上一次已经上传了多少个片段
从断点开始：得到答案后，前端就可以从下一个片段开始上传，而不是重新开始
这样，即使网络断开，我们也能像玩游戏存档一样，从上次的「断点」继续上传，大大提高了用户体验。
四、实战案例：代码片段解析
说了这么多理论，我们来看看实际的代码是怎么写的。这里我用JavaScript举个简单的例子：
javascript
复制代码
// 前端上传函数
async function uploadFile(file) {
const chunkSize = 1024 * 1024; // 1MB
const totalChunks = Math.ceil(file.size / chunkSize);
// 1. 先查询已上传的片段数量
const uploadedChunks = await getUploadedChunks(file.name);
const uploadPromises = [];
// 2. 从已上传的下一个片段开始上传
for (let i = uploadedChunks; i < totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('chunkIndex', i);
formData.append('fileName', file.name);
uploadPromises.push(
fetch('/upload', {
method: 'POST',
body: formData
})
);
}
// 3. 等待所有片段上传完成
await Promise.all(uploadPromises);
// 4. 通知服务器合并文件
await fetch('/merge', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
fileName: file.name,
totalChunks: totalChunks
})
});
console.log('文件上传成功！');
}
结语
大文件上传是前端开发中的一个常见难题，但只要掌握了「分片上传」和「断点续传」这两个「神器」，就能轻松应对各种复杂场景。
记住，大文件上传的核心思想就是「化整为零，各个击破」。通过将大文件切割成小片段，我们不仅可以提高上传的稳定性，还能实现断点续传，大大提升用户体验。
最后，送你一句话：再大的文件，也抵不过我们「拆了再装」的智慧！ 下次遇到大文件上传的需求，不妨试试这种方法吧！