你有没有遇到过上传大文件的时候，浏览器直接卡死？

害，那感觉可太难受了。上传个 1GB 的文件，页面直接白了鼠标点不动，进度条卡在那儿一动不动，你只Neng干瞪眼。

说实话，大文件上传这事儿，真不是“选个 input 框”那么简单。你得考虑怎么切片、怎么断点续传、怎么不卡页面、怎么保证文件不重复上传……

今天咱就来聊聊，怎么全栈实现一个靠谱的大文件上传系统。别急，咱一个一个来慢慢说。

第一层：小学阶段 —— 简单上传

Zui开始，我们dou是这么干的：

前端一个 input，后端一个接口，文件直接上传，完事儿。

代码大概是这样：

// 前端
const formData = new FormData;
formData.append;
axios.post;
// 后端
const upload = multer;
app.post,  => {
  // 处理上传
});

这方法对付小文件还行，但你要是传个 1GB 的视频，那就不行了。

为啥？

因为浏览器会卡死，后端也容易崩，文件太大了请求超时、内存溢出、服务器压力大，各种问题dou来了。

所以咱得升级。

第二层：中学阶段 —— 分片上传

分片上传，就是把一个大文件切成hen多小块，然后一块一块地传。

这样Zuo的好处是啥？

你懂的，Ru果中间断了你只要传没传完的那几块，不用重新来一遍。

比如你把一万本书装成小箱子，一箱一箱运。有一箱丢了你补发那一箱就行，不用重新搬一万本。

那怎么切片？

用 file.slice 方法，这是关键！

代码大概是这样：

function createFileChunks { // 2MB per chunk
  const chunks = ;
  let start = 0;
  while  {
    const end = Math.min;
    const chunk = file.slice;
    chunks.push({
      blob: chunk,
      index: chunks.length,
      start,
      end
    });
    start = end;
  }
  return chunks;
}

你kan，这样就把文件切成了一块一块的。

然后前端并发上传这些块，后端再把它们拼起来。

是不是有点像拼图？

第三层：大学阶段 —— 秒传与唯一标识

面试官问你：“Ru果用户上传一个服务器Yi经有的文件，怎么实现秒传？”

你得知道：文件的“身份证”不是文件名，是内容生成的 MD5 哈希值。

那怎么算 MD5？

你不Neng直接读整个文件，那会卡死浏览器。所以我们用 Web Worker 来算。

Worker 是啥？

它是主线程的“打工仔”，专门干耗时的活儿，比如算 MD5。

它不Neng操作 DOM，不Neng弹窗，不Neng用 alert，但它Neng算得飞快。

主线程负责派活，Worker 负责埋头苦干，算完再把结果传回来。

代码大概是这样：

// 主线程
const myWorker = new Worker;
myWorker.postMessage;
myWorker.onmessage =  => {
  const { hash, percentage } = e.data;
  if  {
    console.log;
  } else {
    console.log;
  }
};
myWorker.onerror =  => {
  console.error;
};

Worker 里是这样：

importScripts;
self.onmessage = function {
  const { file } = e.data;
  const spark = new SparkMD5.ArrayBuffer;
  const reader = new FileReader;
  const chunkSize = 2 * 1024 * 1024;
  let currentChunk = 0;
  reader.onload = function {
    spark.append;
    currentChunk++;
    if ) {
      loadNext;
      self.postMessage({
        percentage:  * 100).toFixed
      });
    } else {
      const md5 = spark.end;
      self.postMessage;
    }
  };
  function loadNext {
    const start = currentChunk * chunkSize;
    const end = Math.min;
    reader.readAsArrayBuffer);
  }
  loadNext;
};

你kan，Worker 里也是分块读取，避免一次性读入内存。

主线程和 Worker 之间通过 postMessage 通信，不直接共享内存。

这样，主线程就不会卡，用户还Nengkan到进度条。

第四层：博士阶段 —— 断点续传

Ru果传到一半断网了剩下的怎么办？

你不Neng让用户重新传一遍，那太伤感情了。

所以我们要记录哪些块Yi经传了哪些还没传。

后端用 MySQL 记录Yi收到的分片序号，前端上传前先查一下跳过Yi传的块。

代码大概是这样：

async function checkUploadedChunks {
  const response = await api.checkChunks;
  return response.uploadedList || ;
}
const uploadedList = await checkUploadedChunks;
const needUploadChunks = allChunks.filter(chunk =>
  !uploadedList.includes
);

你kan，这样就实现了断点续传。

用户断网了？没关系，下次连上网，继续传没传完的块。

第五层：性Neng巅峰 —— Worker 计算

浏览器是单线程的，Ru果你在主线程里算 MD5，页面会卡死。

所以我们用 Worker 来算，不卡页面。

Worker 是啥？

它是主线程的“打工仔”，专门干耗时的活儿，比如算 MD5。

它不Neng操作 DOM，不Neng弹窗，不Neng用 alert，但它Neng算得飞快。

主线程负责派活，Worker 负责埋头苦干，算完再把结果传回来。

你kan，这样就实现了不卡页面的文件上传。

第六层：全栈方案

前端：切片上传，Worker 计算 MD5，断点续传。

后端：接收分片，记录Yi上传的块，合并文件。

数据库：只存文件路径、大小、时间，不存文件二进制流。

文件合并：前端发个“合并”指令，后端把分片按顺序拼起来。

你kan，这样就实现了全栈的大文件上传系统。

是不是有点复杂？

但你懂的，这玩意儿，真香。

Zui后一下

大文件上传，不是一锤子买卖，得考虑切片、并发、断点续传、MD5 唯一标识、Worker 计算……

每一步dou不Neng少，少了就容易出事。

咱就是说这玩意儿，得慢慢来不Neng急。

你要是想一步到位，那肯定要踩坑。

但你要是按部就班，一步步来那就Neng稳稳当当搞定大文件上传。

害，这不就稳了嘛。

---