大文件上传实战指南：让「巨无霸」文件也能「坐高铁」

你是否遇到过这样的场景？想上传一个几GB的视频，结果进度条卡在99%不动了，或者传了半小时突然断网，又得重新开始。别慌，今天我就带你掌握大文件上传的「黑科技」，让你的「巨无霸」文件也能像坐高铁一样快速、稳定地传输！

一、大文件上传的「痛点」：为什么直接传不行？

在说解决方案之前，我们先聊聊为什么大文件直接上传会「翻车」。想象一下，你要搬一个100斤的大箱子，直接扛着走肯定累得气喘吁吁，还容易摔倒。同样的道理，大文件直接上传也有三大「拦路虎」：

网络不稳定：稍微有点波动就会导致整个上传失败
服务器压力大：一次性接收大量数据容易「罢工」
用户体验差：等待时间长，进度不明确

那怎么办呢？答案就是：化整为零，各个击破！

二、大文件上传的「正确姿势」：分片上传

分片上传就像是把100斤的大箱子拆成10个10斤的小箱子，一个个搬过去，既轻松又安全。下面我们来看看前端和后端分别是怎么配合完成这个「拆箱-搬运-组装」过程的。

前端：「拆箱工」的自我修养

作为「拆箱工」，前端的任务就是把大文件切割成多个小片段，然后逐一上传。具体来说，需要完成这五个步骤：

步骤一：「验货」------读取文件资源

首先，我们需要通过<input type="file">让用户选择要上传的文件，然后获取到对应的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('文件上传成功！');
}

结语

大文件上传是前端开发中的一个常见难题，但只要掌握了「分片上传」和「断点续传」这两个「神器」，就能轻松应对各种复杂场景。

记住，大文件上传的核心思想就是「化整为零，各个击破」。通过将大文件切割成小片段，我们不仅可以提高上传的稳定性，还能实现断点续传，大大提升用户体验。

最后，送你一句话：再大的文件，也抵不过我们「拆了再装」的智慧！ 下次遇到大文件上传的需求，不妨试试这种方法吧！