大文件上传主要步骤：

1. 获取文件对象，切分文件
2. 根据文件切片，计算文件唯一hash值
3. 上传文件切片，服务端保存起来
4. 合并文件切片，前端发送合并请求，服务端将文件切片合并为原始文件
5. 秒传，对于已经存在的分片，可以前端发个请求获取已经上传的文件切片信息，前端判断已经上传的切片不再发送切片上传请求；或者后端验证已经存在的切片，直接返回成功结果，后端不再重复写入保存
6. 暂停上传，使用axios的取消请求
7. 继续上传，跟秒传逻辑一样，先发个请求验证，已经上传的切片不再重复发请求，将没有上传的切片继续上传

技术栈：

包管理工具：

• pnpm

前端：

• vue 3.3.11
• vite
• axios
• spark-md5：根据文件内容生成唯一hash值

后端：

• node
• koa
• @koa/router
• koa-body 解析请求体，包括json、form-data等
• @koa/cors：解决跨域

1、文件分片

先用vite搭一个vue3项目 pnpm create vite

首先拿到上传的文件，通过 <input type="file"/>change事件拿到File文件对象，File继承自Blob，可以调用Blob的实例方法，然后用slice方法做分割；

这篇文章介绍了 JS中的二进制对象：Blob、File、ArrayBuffer，及转换处理：FileReader、URL.createObjectURL

// App.vue <script setup> import { ref } from "vue"; import { createChunks } from "./utils";  // 保存切片 const fileChunks = ref([]);  function handleFileChange(e) {   // 获取文件对象   const file = e.target.files[0];   if (!file) {     return;   }   fileChunks.value = createChunks(file);   console.log(fileChunks.value); } </script>  <template>   <input type="file" @change="handleFileChange" />   <button>上传</button> </template>  // utils.js  // 默认每个切片3MB const CHUNK_SIZE = 3 * 1024 * 1024;  export function createChunks(file, size = CHUNK_SIZE) {   const chunks = [];   for (let i = 0; i < file.size; i += size) {     chunks.push(file.slice(i, i + size));   }   return chunks; }

2、计算hash

上传文件给服务器，要区分一下不同文件，对于服务端已经存在的文件切片，前端不需要重复上传，服务器不需要重复处理，节约性能。要做到区分不同文件，就需要给每个文件一个唯一标识，用 spark-md5 这个库来根据文件内容生成唯一hash值，安装 pnpm add spark-md5。

// App.vue <script setup> import { ref } from "vue"; import { createChunks, calculateFileHash } from "./utils";  const fileChunks = ref([]);  async function handleFileChange(e) {   const file = e.target.files[0];   if (!file) {     return;   }   fileChunks.value = createChunks(file);   const sT = Date.now();   const hash = await calculateFileHash(fileChunks.value);   console.log(Date.now() - sT); //测试一下计算hash耗时 }  </script>

// utils.js import SparkMD5 from "spark-md5";  export function calculateFileHash(chunkList) {   return new Promise((resolve) => {     const spark = new SparkMD5.ArrayBuffer();     // FileReader读取文件内容     const reader = new FileReader();     reader.readAsArrayBuffer(new Blob(chunkList));     // 读取成功回调     reader.onload = (e) => {       spark.append(e.target.result);       resolve(spark.end());     };   }); }

上面calculateFileHash这个函数计算hash使用文件所有切片内容，如果文件很大，将会非常耗时，测试了一个526MB的文件，需要6813ms左右，为了保证所有切片都参与计算，也不至于太耗时，采取下面这种方式：

• 第一个和最后一个切片全部计算
• 其他切片取前、中、后两个字节参与计算

这种方式可能会损失一点准确性，如果计算出来的hash变了，就重新上传呗

// utils.js const CHUNK_SIZE = 3 * 1024 * 1024;  export function calculateFileHash(chunkList) {   return new Promise((resolve) => {     const spark = new SparkMD5.ArrayBuffer();     const reader = new FileReader();     // 抽取chunk     const chunks = [];     for (let i = 0; i < chunkList.length; i++) {       const chunk = chunkList[i];       if (i === 0 || i === chunkList.length - 1) {         chunks.push(chunk);       } else {         chunks.push(chunk.slice(0, 2));         chunks.push(chunk.slice(CHUNK_SIZE / 2, CHUNK_SIZE / 2 + 2));         chunks.push(chunk.slice(CHUNK_SIZE - 2, CHUNK_SIZE));       }     }     reader.readAsArrayBuffer(new Blob(chunks));     reader.onload = (e) => {       spark.append(e.target.result);       resolve(spark.end());     };   }); }

再次传同一个文件测试，只需要975ms左右

3、上传切片

前端逻辑：

这里要考虑一个问题，如果一个大文件切成了几十上百个切片，这时如果同时发送，浏览器负担很重，浏览器默认允许同时建立 6 个 TCP 持久连接，也就是说同一个域名同时能支持6个http请求，多余的会排队。这里就需要控制一下并发请求数量，设置为同时发送6个

// App.vue <script setup> import {   createChunks,   calculateFileHash,   createFormData,   concurrentChunksUpload, } from "./utils";  async function uploadChunks() {   const hash = await calculateFileHash(fileChunks.value);   // 利用计算的文件hash构造formData   const dataList = createFormData(fileChunks.value, hash);   // 切片上传请求   await concurrentChunksUpload(dataList); } </script  <template>   <input type="file" @change="handleFileChange" />   <button @click="uploadChunks()">上传</button> </template>

// utils.js  const CHUNK_SIZE = 10 * 1024 * 1024; const BASE_URL = "http://localhost:2024";  // 根据切片的数量组装相同数量的formData export function createFormData(fileChunks, hash) {   return fileChunks     .map((chunk, index) => ({       fileHash: hash,       chunkHash: `${hash}-${index}`,       chunk,     }))     .map(({ fileHash, chunkHash, chunk }) => {       const formData = new FormData();       formData.append("fileHash", fileHash);       formData.append("chunkHash", chunkHash);       formData.append(`chunk-${chunkHash}`, chunk);       return formData;     }); }  // 默认最大同时发送6个请求 export function concurrentChunksUpload(dataList, max = 6) {   return new Promise((resolve) => {     if (dataList.length === 0) {       resolve([]);       return;     }     const dataLength = dataList.length;     // 保存所有成功结果     const results = [];     // 下一个请求     let next = 0;     // 请求完成数量     let finished = 0;      async function _request() {       // next达到dataList个数，就停止       if (next === dataLength) {         return;       }       const i = next;       next++;        const formData = dataList[i];       const url = `${BASE_URL}/upload-chunks`;       try {         const res = await axios.post(url, formData);         results[i] = res.data;         finished++;         // 所有切片上传成功返回         if (finished === dataLength) {           resolve(results);         }         _request();       } catch (err) {         console.log(err);       }     }     // 最大并发数如果大于formData个数，取最小数     const minTimes = Math.min(max, dataLength);     for (let i = 0; i < minTimes; i++) {       _request();     }   }); }

const path = require("path"); const fs = require("fs"); const Koa = require("koa"); const KoaRouter = require("@koa/router"); const cors = require("@koa/cors"); const { koaBody } = require("koa-body");  const app = new Koa(); const router = new KoaRouter(); // 保存切片目录 const chunksDir = path.resolve(__dirname, "../chunks");  //cors解决跨域 app.use(cors());  app.use(router.routes()).use(router.allowedMethods()); app.listen(2024, () => console.log("Koa文件服务器启动"));  // 中间件:处理multipart/form-data，切片写入磁盘 const uploadKoaBody = koaBody({   multipart: true,   formidable: {     // 设置保存切片的文件夹     uploadDir: chunksDir,     // 在保存到磁盘前回调     onFileBegin(name, file) {       if (!fs.existsSync(chunksDir)) {         fs.mkdirSync(chunksDir);       }       // 切片重命名       file.filepath = `${chunksDir}/${name}`;     },   }, });  // 上传chunks切片接口 router.post("/upload-chunks", uploadKoaBody, (ctx) => {   ctx.body = { code: 200, msg: "文件上传成功" }; });

// App.vue <script setup> import {   createChunks,   calculateFileHash,   createFormData,   concurrentChunksUpload,   mergeChunks } from "./utils";  async function uploadChunks() {   const hash = await calculateFileHash(fileChunks.value);   // 利用计算的文件hash构造formData   const dataList = createFormData(fileChunks.value, hash);   // 切片上传请求   await concurrentChunksUpload(dataList);   // 等所有chunks发送完毕，发送合并请求   mergeChunks(originFile.value.name); } </script  <template>   <input type="file" @change="handleFileChange" />   <button @click="uploadChunks()">上传</button> </template>

// utils.js  export function mergeChunks(filename) {   return axios.post(BASE_URL + "/merge-chunks", { filename, size: CHUNK_SIZE }); }

后端逻辑：

• fs.readdirSync(path[, options])：同步读取给定目录的内容，返回一个数组，其中包含目录中的所有文件名或对象
• fs.existsSync(path)：判断路径是否存在
• fs.mkdirSync(path[, options])：同步地创建目录
• fs.createWriteStream(path[, options])：创建文件可写流
• fs.createReadStream(path[, options])：创建文件可读流

// 合并chunks接口 router.post("/merge-chunks", koaBody(), async (ctx) => {   const { filename, size } = ctx.request.body;   await mergeChunks(filename, size);   ctx.body = { code: 200, msg: "合并成功" }; });  // 合并 chunks async function mergeChunks(filename, size) {   // 读取chunks目录中的文件名   const chunksName = fs.readdirSync(chunksDir);   if (!chunksName.length) return;   // 保证切片合并顺序   chunksName.sort((a, b) => a.split("-")[2] - b.split("-")[2]);   // 提前创建要写入的static目录   const fileDir = path.resolve(__dirname, "../static");   if (!fs.existsSync(fileDir)) {     fs.mkdirSync(fileDir);   }   // 最后写入的文件路径   const filePath = path.resolve(fileDir, filename);   const pipeStreams = chunksName.map((chunkName, index) => {     const chunkPath = path.resolve(chunksDir, chunkName);     // 创建写入流     const writeStream = fs.createWriteStream(filePath, { start: index * size });     return createPipeStream(chunkPath, writeStream);   });   await Promise.all(pipeStreams);   // 全部写完，删除chunks切片目录   fs.rmdirSync(chunksDir); }  // 创建管道流写入 function createPipeStream(chunkPath, writeStream) {   return new Promise((resolve) => {     const readStream = fs.createReadStream(chunkPath);     readStream.pipe(writeStream);     readStream.on("end", () => {       // 写完一个chunk，就删除       fs.unlinkSync(chunkPath);       resolve();     });   }); }

// 中间件，已经存在的切片，直接返回成功结果 async function verifyChunks(ctx, next) {   // 前端把切片hash放到请求路径上带过来   const chunkName = ctx.request.querystring.split("=")[1];   const chunkPath = path.resolve(chunksDir, chunkName);   if (fs.existsSync(chunkPath)) {     ctx.body = { code: 200, msg: "文件已上传" };   } else {     await next();   } }  // 上传chunks切片接口 router.post("/upload-chunks", verifyChunks, uploadKoaBody, (ctx) => {   ctx.body = { code: 200, msg: "文件上传成功" }; });