大文件快速上传的方案，相信你也有过了解，其实无非就是将 文件变小，也就是通过 压缩文件资源 或者 文件资源分块 后再上传。
本文只介绍资源分块上传的方式，并且会通过 前端（vue3 + vite） 和 服务端（nodejs + koa2） 交互的方式，实现大文件分块上传的简单功能。
梳理思路
问题 1：谁负责资源分块？谁负责资源整合？
当然这个问题也很简单，肯定是前端负责分块，服务端负责整合。
问题 2：前端怎么对资源进行分块？
首先是选择上传的文件资源，接着就可以得到对应的文件对象 File，而 File.prototype.slice 方法可以实现资源的分块，当然也有人说是 Blob.prototype.slice 方法，因为 Blob.prototype.slice === File.prototype.slice。
问题 3：服务端怎么知道什么时候要整合资源？如何保证资源整合的有序性？
由于前端会将资源分块，然后单独发送请求，也就是说，原来 1 个文件对应 1 个上传请求，现在可能会变成 1 个文件对应 n 个上传请求，所以前端可以基于 Promise.all 将这多个接口整合，上传完成在发送一个合并的请求，通知服务端进行合并。
合并时可通过 nodejs 中的读写流（readStream/writeStream），将所有切片的流通过管道（pipe）输入最终文件的流中。
在发送请求资源时，前端会定好每个文件对应的序号，并将当前分块、序号以及文件 hash 等信息一起发送给服务端，服务端在进行合并时，通过序号进行依次合并即可。
问题 4：如果某个分块的上传请求失败了，怎么办？
一旦服务端某个上传请求失败，会返回当前分块失败的信息，其中会包含文件名称、文件 hash、分块大小以及分块序号等，前端拿到这些信息后可以进行重传，同时考虑此时是否需要将 Promise.all 替换为 Promise.allSettled 更方便。
前端部分
创建项目
通过 pnpm create vite 创建项目，对应文件目录如下.
请求模块
src/request.js
该文件就是针对 axios 进行简单的封装，如下：
import axios from "axios";const baseURL = 'http://localhost:3001';export const uploadFile = (url, formData, onUploadProgress = () => { }) => { return axios({ method: 'post', url, baseURL, headers: { 'Content-Type': 'multipart/form-data' }, data: formData, onUploadProgress });}export const mergeChunks = (url, data) => { return axios({ method: 'post', url, baseURL, headers: { 'Content-Type': 'application/json' }, data });}文件资源分块
根据 DefualtChunkSize = 5 * 1024 * 1024 ，即 5 MB ，来对文件进行资源分块进行计算，通过 spark-md5[1] 根据文件内容计算出文件的 hash 值，方便做其他优化，比如：当 hash 值不变时，服务端没有必要重复读写文件等。
// 获取文件分块const getFileChunk = (file, chunkSize = DefualtChunkSize) => { return new Promise((resovle) => { let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, chunks = Math.ceil(file.size / chunkSize), currentChunk = 0, spark = new SparkMD5.ArrayBuffer(), fileReader = new FileReader(); fileReader.onload = function (e) { console.log('read chunk nr', currentChunk + 1, 'of'); const chunk = e.target.result; spark.append(chunk); currentChunk++; if (currentChunk < chunks) { loadNext(); } else { let fileHash = spark.end(); console.info('finished computed hash', fileHash); resovle({ fileHash }); } }; fileReader.onerror = function () { console.warn('oops, something went wrong.'); }; function loadNext() { let start = currentChunk * chunkSize, end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; let chunk = blobSlice.call(file, start, end); fileChunkList.value.push({ chunk, size: chunk.size, name: currFile.value.name }); fileReader.readAsArrayBuffer(chunk); } loadNext(); });}发送上传请求和合并请求
通过 Promise.all 方法整合所以分块的上传请求，在所有分块资源上传完毕后，在 then 中发送合并请求。
// 上传请求const uploadChunks = (fileHash) => { const requests = fileChunkList.value.map((item, index) => { const formData = new FormData(); formData.append(`${currFile.value.name}-${fileHash}-${index}`, item.chunk); formData.append("filename", currFile.value.name); formData.append("hash", `${fileHash}-${index}`); formData.append("fileHash", fileHash); return uploadFile('/upload', formData, onUploadProgress(item)); }); Promise.all(requests).then(() => { mergeChunks('/mergeChunks', { size: DefualtChunkSize, filename: currFile.value.name }); });}进度条数据
分块进度数据利用 axios 中的 onUploadProgress 配置项获取数据，通过使用computed 根据分块进度数据的变化自动自动计算当前文件的总进度。
// 总进度条const totalPercentage = computed(() => { if (!fileChunkList.value.length) return 0; const loaded = fileChunkList.value .map(item => item.size * item.percentage) .reduce((curr, next) => curr + next); return parseInt((loaded / currFile.value.size).toFixed(2));})// 分块进度条const onUploadProgress = (item