**当学习成为了习惯，知识也就变成了常识。** 感谢各位的 **关注**、**点赞**、**收藏**和**评论**。新视频和文章会第一时间在微信公众号发送，欢迎关注：[李永宁lyn](https://gitee.com/liyongning/typora-image-bed/raw/master/202202171742614.jpg) 文章已收录到 [github 仓库 liyongning/blog](https://github.com/liyongning/blog)，欢迎 Watch 和 Star。 **[更多精彩内容](https://github.com/liyongning/blog/blob/main/README.md)**

# 创建项目基于 Vite + Vue3 创建最简前端项目 —— file-upload，并在项目根目录下基于 express 创建 Node Server，如何已熟悉，可以直接进入下一节。 ## 前端项目通过 Vite 来创建项目，然后选择自己熟悉的技术栈，比如 Vue、React，只需要创建一个最简单的项目即可，比如： ```shell npm create vite@latest file-upload ``` ![image-20240708073716954](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bc1c3c66d2124b06a680ffc760680385~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=%2BElcXbY%2BIpSZ920FS4IfUJW1DhE%3D) 执行 `npm run dev` 启动前端项目 ![image-20240708080524819](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bbe939a5284541d2a3297908a4ac6257~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=FWn1lyioOyK7afsAFx0zW%2Br6ph0%3D) 清空 `/src/App.vue` 文件，并输入如下内容 ```vue ``` 效果： ![image-20240708081115969](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/296654f38b73429497a92be31ba5aa7c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=Wd%2FgzxYZbIcNT%2B%2B3gfyZUC3ZWWU%3D) ## Node Server 在项目根目录下创建 ./server/index.js 文件，作为服务端项目，并安装 express 作为框架 ```shell npm i express ``` 代码如下： ```javascript import express from 'express' const app = express() app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(3000, () => { console.log('Server listening on port 3000') }) ``` 启动 node server ```shell nodemon server/index.js ``` ![image-20240708080258231](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4b23383281d2464abe73845f4188fb9e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=B2QS7pEpEOpAKFJS0jax4ql8q3I%3D) 浏览器访问 `http://localhost:3000` ![image-20240708080344657](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bf4a3ffb204245dcab6438002a7f1e9a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=d1FGHktIkPB4Ukr7ROj5HDZzQLA%3D) 好了，到这里，基本准备工作就完成了，接下来就进入本文重点 —— 文件上传。 # 最简单的文件上传首先安装以下三个 npm 包 ```shell npm i axios cors multer ``` * axios 是为了发送网络请求 * cors 是为了处理跨域问题 * 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件 **前端 —— /src/App.vue：** ```vue ``` 逻辑很简单 * 一个文件选择输入框，并通过 inputRef 获取到该 DOM * 一个上传按钮，选择文件后，点击上传 * 通过 inputRef 获取到文件对象，并添加到 FormData 对象中，文件上传一般都通过该对象完成 * 通过 axios 发送请求，并监听上传进度 **后端 —— /server/index.js：** ```javascript import express from 'express' import cors from 'cors' import multer from 'multer' import { dirname, resolve } from 'path' import { fileURLToPath } from 'url' import { existsSync, mkdirSync } from 'fs' // 解决 ESM 无法使用 __dirname 变量的问题 const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) const app = express() // 解决跨域问题 app.use(cors()) /** * Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件 * 注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。 */ const uplaod = multer({ // 存储，上传的文件落盘 storage: multer.diskStorage({ // 将文件放到 /server/uploads 目录下 destination: (_, __, cb) => { const uploadsDir = resolve(__dirname, 'uploads') if (!existsSync(uploadsDir)) { mkdirSync(uploadsDir) } cb(null, uploadsDir) }, // 文件名使用原始文件名 filename: (_, file, cb) => { cb(null, file.originalname) } }) }) app.get('/', (_, res) => { res.send('Hello World!') }) app.post('/uplaod', uplaod.single('file'), (_, res) => { res.send('File uploaded successfully') }) app.listen(3000, () => { console.log('Server listening on port 3000') }) ``` 关键地方都写了注释，核心逻辑主要在 multer 配置项中。multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，其主要用来处理文件上传。效果展示： ![image-20240708171520383](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ae82859ca2514b798650e4d40edbf8b0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=8o%2FEr5SW%2BD1QMwgNUPTSNXBn94g%3D) ![image-20240708171547210](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8ec6e87ec8ba4bb0a53560a6afdbed80~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=5IQGOua1maCfFm5gaheY1G3m1wk%3D) ## 数据提交格式科普提交 POST 请求时，我们一般会使用三种类型的 Content-Type：multipart/form-data、x-www-urlencoded、application/json，这三种类型有什么区别呢？ ### multipart/form-data multipart/form-data 是一种 MIME 类型，用于在 HTTP 请求中传输表单数据，这种类型的请求通常用于文件上传，因为它允许将文件作为请求的一部分进行传输。当然，multipart/form-data 也可以用于传输其他类型的数据，例如文本字段、单选按钮、复选框等。它表示的数据是以多部分的形式进行编码的，每个部分都有自己的 Content-Type 和 Content-Disposition 头，用于描述数据的类型和文件信息，比如，以当前的上传请求为例： ![image-20240708181714050](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8477ae02f67f45a49ba77065e3190a1f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=%2FrnRegNWPnWmR1lZo12MdsUUq34%3D) 其中的 ----WebKitFormBoundary 来自于 Request Header 中的 Content-Type，用来分割每一部分的数据，就是一个分隔符，这在服务端解析数据的时候会用到。 ![image-20240708181838604](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/652bcc12d7714900958d63ee75a72446~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=82HbCeNs3Pdfn5%2FN5rlpEjfdgVE%3D) ### x-www-urlencoded x-www-urlencoded 是另一种 MIME 类型，也用于在 HTTP 请求中传输表单数据。和 multipart/form-data 区别在于，它通常用户传输简单的文本数据，如表单字段中的文本输入框、单选按钮、复选框等的值，它不适合传输文件或二进制数据。当 Content-Type 为 x-www-form-urlencoded 格式时，表单数据会被编码为 URL 编码（类似于在 URL 中的查询字符串使用的编码），并放在请求体中，服务器接收到请求后，会解析请求体，提取其中的表单字段和值。 **示例：** ```javascript const formData = new URLSearchParams(); formData.append('username', 'your_username'); formData.append('password', 'your_password'); axios.post('/your_api_url', formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); ``` ```javascript import express from 'express' import bodyParser from 'body-parser' const app = express(); // 使用 body-parser 中间件来解析 x-www-form-urlencoded 类型的数据 app.use(bodyParser.urlencoded({ extended: true })); app.post('/your-route', (req, res) => { // 现在你可以访问 req.body 来获取解析后的数据 console.log(req.body); res.send('Data received'); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` ### application/json application/json 用于传输 JSON 格式的数据，JSON 是一种轻量级的数据交换格式，通常用于 Web API，比如： ```javascript import axios from 'axios' axios.request({ url: 'your-route', method: 'POST', data: { key1: 'value1', key2: 'value2' } }) ``` 所以，总的来说，`multipart/form-data`用于复杂表单数据，包括文件上传；`x-www-urlencoded`用于简单表单数据；而`application/json`用于 Web API 的数据传输，特别是需要传输结构化数据的时候。 # 分片（大文件上传） **为什么要支持分片上传？？** * 提高上传稳定性和可靠性。文件在上传过程中，网络链接可能会出现中断，如果不分片上传，一旦链接中断，整个文件就需要重新上传。而采用分片上传后，即使中途连接断开，只需要重新上传未完成的部分即可（断点续传），大大提高了上传的成功率和效率 * 降低网络压力和带宽占用。分片上传可以人为控制每一片的大小，避免出现单次上传占用过多带宽的情况，从而减轻对网络的压力；同时，也可以人为的控制上传速度，不至于当其它应用受影响时束手无策。说了理论，接下来就进入实战阶段了。大致思路是： * 前端将上传的文件按照一定大小进行切片，然后并发上传 * 切片可能会涉及主线程的长时间占用，可以采用通过 web worker 来完成 * 并发上传涉及并发控制，这是一道常见的面试题 * 服务端需要维护已上传的分片列表，从而支持断点续传的能力，待所有分片都上传后，将所有分片合并成一个完整的文件 ## 分片上传代码量比较少，就直接全部列出来了，都是基于之前的代码进行迭代改造的 ### 前端 —— App.vue 逻辑还是以点击上传按钮为开始（handleUpload） * 定义了一个 allFileChunks 数组，用来存放所有的文件切片 * 调用 splitChunkForFile 方法对文件进行切片，并将切片放到 allFileChunks 数组中，等待上传 * splitChunkForFile 方法的逻辑很简单，通过 file.slice 方法从文件的 start 位置切到 end 位置（不包含 end） * 然后将产生的切片通过 new File 重新封装为一个 File 对象，并存放到 allFileChunks 数组中 * 遍历 allFileChunks 数组，上传所有切片，这里有一些需要注意的点 * 在 formData 对象中增加了一些 key，比如 uuid、index、total，都是为了辅助服务端做切片的分类、维护和合并，具体作用可以看代码注释 * 另外就是 uuid 这块儿，Demo 中直接使用的文件名，但在实际使用时需要确保唯一性，比如可以对文件做 hash * 可以看到，上传切片时没有做并发控制，目前的逻辑是不论有多少切片都一股脑的扔给浏览器做上传，后面我们会在 **并发控制** 章节完善这部分内容 ```vue ``` ### 服务端 —— index.js 相比于前面的代码，所有的改动都在 `/upload` API 中，主要是结合前端给到的相关字段做切片的维护和合并，整体逻辑为： * 通过 allFiles 对象来维护所有文件的所有切片，其数据结构为 `{ fileName: [chunk1 路径, chunk2 路经, ...] }`，以文件名为 key，文件的所有 chunk 的存放路径组成的数组为 value，就像上面说的，实际应用中不能以文件名为 key，可以使用文件的 hash 为key，以保证其唯一性。这里我们只以演示原理为目的 * 各个 chunk 的落盘（存储）还是上面 multer 的逻辑，没有改动 * 如果发现当前文件的所有 chunk 均已上传完毕 —— allFiles\[uuid].length === total 时（total 是前端给的），就认为当前文件的所有 chunk 都上传完了，开始合并 chunk * 接下来就是按顺序同步读取每个 chunk 的内容，并依次写入文件，顺便删掉磁盘上存放的临时 chunk 文件 * 到此，分片上传就完成了 ```javascript import express from 'express' import cors from 'cors' import multer from 'multer' import { dirname, resolve } from 'path' import { fileURLToPath } from 'url' import { existsSync, mkdirSync, unlinkSync, readFileSync, appendFileSync } from 'fs' // 解决 ESM 无法使用 __dirname 变量的问题 const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) const app = express() // 解决跨域问题 app.use(cors({ maxAge: 86400 })) /** * Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件 * 注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。 */ const uplaod = multer({ // 存储，上传的文件落盘 storage: multer.diskStorage({ // 将文件放到 /server/uploads 目录下 destination: (_, __, cb) => { const uploadsDir = resolve(__dirname, 'uploads') if (!existsSync(uploadsDir)) { mkdirSync(uploadsDir) } cb(null, uploadsDir) }, // 文件名使用原始文件名 filename: (_, file, cb) => { cb(null, file.originalname) } }) }) app.get('/', (_, res) => { res.send('Hello World!') }) // 以 uuid 为 key，文件所有的 chunks 组成的数组为 value const allFiles = {} app.post('/uplaod', uplaod.single('file'), (req, res) => { const { uuid, index, total } = req.body // chunk 的存储路径 const { path } = req.file if (!allFiles[uuid]) allFiles[uuid] = [] allFiles[uuid][index] = path if (allFiles[uuid].filter(item => item).length === +total) { // 说明已经接收完了所有的 chunk const destFilePath = resolve(__dirname, 'uploads', uuid) // 合并临时文件并将其删除 allFiles[uuid].forEach(async filePath => { const content = readFileSync(filePath) appendFileSync(destFilePath, content) unlinkSync(filePath) }) allFiles[uuid] = [] res.send(`file —— ${uuid} uploaded successfully`) return } res.send(`chunk —— ${uuid + index} uploaded successfully`) }) app.listen(3000, () => { console.log('Server listening on port 3000') }) ``` ### 效果展示 ![image-20240709162038123](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/93978ee5cfb549af81cc001fa68c21aa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=JvlBGnWpkq%2FI4kkBk4alXoopCdw%3D) ![image-20240709162110218](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/196e41ec9cc34fca98d214d58e56e0c6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=QCtmq8M7FjjD0DsNjoVHP8U061w%3D) 如果文件足够大（上传需要一定的时间）或者在服务端的文件合并逻辑处打个断点，就可以看到 `/server/uploads` 目录下有很多很临时的 chunk 文件。 ## 切片优化 + 并发控制 **为什么要做切片优化？现在的切片逻辑有什么问题吗？** * 递归逻辑致使栈溢出 * 主线程被切片逻辑长时间占用换一个大点的文件，点击上传，出现如下报错，很明显栈溢出了。回顾逻辑，可以知道 splitChunkForFile 方法是一个递归函数，这就意味着，如果文件比较大，切片比较多，递归层级就会很深，自然就出现了栈溢出的问题。 ![image-20240709195208809](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/da1a15e4ee904dc891992cffee61d8b4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=noIan6nwniE5s8UrYNjC2ESf5Bo%3D) ![image-20240709195256592](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a86ab9a81a3d4f548fc5c12e3daa535b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=SbhPH%2BkRF0UPzWYdEfj4sUXJI0c%3D) 另外，即使抛开溢出问题不谈，当前切片逻辑是同步执行的，当切片数量很大时，主线会被长时间占用，甚至浏览器被卡死。这点可以将切片逻辑换成循环执行来验证（递归无法验证，因为会先出现栈溢出的情况）： ```javascript /** * 文件切片 * @param { File } file 文件对象 * @returns Array 文件的所有切片组成的 File 对象 */ function splitChunkForFile(file) { const { name, size, type, lastModified } = file // 存放所有切片 const allFileChunks = [] // 每一片的开始位置 let start = 0 // 循环切每一片，直到整个文件切完 while (start <= size) { const chunk = file.slice(start, Math.min(start + chunkSize, size)) const newFileChunk = new File([chunk], name + allFileChunks.length, { type, lastModified, }) start += chunkSize allFileChunks.push(newFileChunk) } return allFileChunks } // 文件切片 const allFileChunks = splitChunkForFile(file) ``` 效果如下： ![image-20240709205203062](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1baf9e9708d349a09877f3ace9c0156a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=IT6KGrnAsN%2BVfDyhWsbY%2BAy3BTg%3D) ![image-20240709210123899](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/562b9604063e4510889ccd5acd212eae~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=bk2ILw5zAcKg06380aCx0v4nZ8k%3D) **为什么需要并发控制？现在没有并发控制有什么问题吗？** 现在的逻辑是：先获取文件的所有切片，然后遍历切片数组，将所有切片一股脑全部发送给服务端。 * 没有几个服务器能扛住上万的 QPS * 可以看到有太多的请求处于连接等待状态，也有大量请求直接就失败了 ![image-20240710111511939](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1eedced469e74f69968ce9cf83b4c4e1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=O7%2BMS5hVzFW1OSiWIkkFQzntces%3D) ### 优化思路 * 将切片任务放到 Web Worker 中去完成，从而解决主线程被长时间占用问题 * 增加并发控制，从而解决 QPS 过高的问题 ### 实战 #### /src/App.vue 点击 Upload 按钮之后，逻辑如下： * 将文件交给 Web Worker，由 Web Worker 执行切片操作，然后等待 Web Worker 回传文件切片 * 收到 Worker 回传的文件切片之后，将切片存入 allFileChunks 数组，并调用 uploadChunk 上传切片文件 * uploadChunk 方法是一个支持并发控制的上传方法，并发控制的核心思路是 * 在请求开始之前时当前并发数的检测和是否已全部上传完的检测，这保证了请求数量不超过并发数 * 后续请求的触发是通过 Promise.then 的回调来完成的，即每完成一个请求，就发送下一个请求 * 文件上传的相关逻辑和之前一样，没有变化 ```vue ``` #### /src/web-worker.js Worker 是独立于主线程运行的线程，有自己独立的执行上下文和事件循环。当然了，如果系统资源有限，还是回和其它线程（比如主线程）产生竞争。它在这里负责完成上面的同步切片操作，每切完一个，就回传给主线程，由主线程完成上传。所以，整个文件上传是由主线程和 Worker 线程异步协同完成的。 ```javascript /** * 文件切片 * 通过循环将整个文件切片，在切的过程中每切一片，就当切好的分片发给主线程，当真个文件切完之后告诉主线程已完成 * @param { File } file 文件对象 * @param { number } chunkSize 单个切片的大小，单位字节 */ function splitChunkForFile(file, chunkSize) { const { name, size, type, lastModified } = file // 每一片的开始位置 let start = 0 // chunk 索引，用来将序号添加到文件名上 let chunkIdx = 0 // 循环切每一片，直到整个文件切完 while (start < size) { const chunk = file.slice(start, Math.min(start + chunkSize, size)) const newFileChunk = new File([chunk], name + chunkIdx++, { type, lastModified, }) start += chunkSize // 将当前切片发给主线程 this.postMessage({ operation: 'splitChunkForFile', file: newFileChunk }) } } // 接收主线程的消息 onmessage = function (e) { const { data } = e const { operation } = data if (operation === 'splitChunkForFile') { // 表示给对文件切片操作 splitChunkForFile.apply(this, [data.file, data.chunkSize]) } // 还可以扩展其它操作 } ``` ### 效果展示可以发现切片不在卡主线程、请求也更早的开始了（不需要等到全部切片完成）、并发也只有 6个。 ![Jul-11-2024 14-09-10](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/780bc3f5b59b494199fdfa734d04e24c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=Q%2BnVnEGba9MYhLAUZwCbGjOzZHU%3D) # 断点续传断点续传是在分片上传的基础上来实现的，当上传过程中出现故障时，能够从上次中断的地方继续上传，而不是从头开始。这点对于**大文件**的上传尤为重要，因为上传时间较长，出现中断的概率较高。 ## 实战断点续传的实现，和分片一样，也需要前后端一起配合，具体调整如下。 ### /src/App.vue * 在上传逻辑开始执行前先通过 `getFileChunksByFileName` 方法获取当前文件已经上传的切片列表，然后执行后续的切片逻辑 * 在上传切片之前，检测一下当前切片是否已经上传，如果已经上传，则直接结束当前切片的上传，进入下一个切片的上传逻辑这就是前端侧改造的核心逻辑。 ```javascript /** * 获取文件已上传的切片 * @param { string } fileName 文件名 */ async function getFileChunksByFileName(fileName) { const { data } = await axios.request({ url: 'http://localhost:3000/get-file-chunks-by-uuid', method: 'GET', params: { uuid: fileName } }) return data } ``` ![image-20240712113547239](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/27363eadf0394264bf1f5603c0887be8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=v1BSEFyG%2B23tUoaXddagjUe4khQ%3D) ![image-20240712113726779](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a76d29e36d8845939da41bb9b35bf067~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=p1LZ8B2fXaZrlrlf4BbdA0oGe8I%3D) ### /server/index.js 增加一个获取指定文件已上传切片列表的接口，供前端调用。 ```javascript // 获取指定文件的切片列表，即获取该文件已上传的切片，用于断点续传 app.get('/get-file-chunks-by-uuid', (req, res) => { // 这里的 uuid 就是文件名 const { uuid } = req.query || {} res.send(allFiles[uuid] || []) }) ``` ## 效果当前文件我先提前上传了一部分，就是看到的前 6 个切片，然后刷新页面打断执行。接着再次上传该文件，前 6 个切片瞬间完成（不需要重新上传）。 ![Jul-12-2024 11-46-26](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c3c1ad865a4e4649b81fce15e3391ba6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5rC45a6B:q75.awebp?rk3s=f64ab15b&x-expires=1757286325&x-signature=%2BllkTLYi8qADJABNpzn7hrrE8kE%3D) # 切片大小可以看到，文中的切片大小有两种，一是 4B，二是 1MB。一直没有提及切片的大小的设计，但这里还是要简单说明一下。大家都知道 HTTP1.1 对于带宽的利用率是很糟糕的，这是 HTTP1.1 的一个核心问题，其中一个原因就是 TCP 的慢启动。一旦一个 TCP 连接建立之后，就进入了发送数据的状态，刚开始 TCP 协议回采用一个非常慢的速度去发送数据，然后慢慢加快发送数据的速度，知道发送数据的速度达到一个理想状态，这个过程就叫慢启动。很像一辆车启动加速的过程。但慢启动是 TCP 为了减少网络拥塞的一种策略，这个没办法改变。所以，这里提到切片大小的设计，意思是**切片大小不可设置的过小**，但设置过大也不可取。关于切片大小其实没有一个固定的标准，通常需要根据实际大小和网络环境进行调整，以下是一些常见的策略： * **小文件（几百MB以下）**：切片大小可以设置为10MB到20MB之间 * **中等大小文件（几百MB到几GB）**：切片大小可以设置为5MB到10MB之间 * **大文件（几十GB以上）**：切片大小可以设置为1MB到5MB之间总的来说，对于较小的文件，切片可以较大，以减少分片数量和控制开销；对于大文件，可以适当减小切片大小，以确保每个分片都在合理的时间内上传完成，并支持更细粒度的断点续传。 # 总结本文的目标是：一文搞透文件上传。当你读到这里，希望不负初衷。现在回顾一下文章的整体内容 * 从最简单的创建项目开始，前端用 Vite + Vue3 + axios，服务端用 express + multer（处理文件上传的中间件） * 写了最简单的文件上传 * 前端一个 file 类型的 input 输入框，然后取到 file 对象放到 FormData 对象中，通过 axios 完成上传 * 服务端基于 multer 中间件完成文件的落盘 * 顺便普及了下三种常见的 Content-Type —— multipart/form-data、x-www-urlencoded、application/json 之间的异同点和使用场景 * 有了上面基础知识的地基，接下来就进入了文件上传的核心难点，也是文件上传场景常见的面试题 —— 大文件上传 * 我们从分片开始，这是实现后面断点续传的基础 * 前端将一个大文件切成一个个片段，然后将这些片段依次上传给服务端 * 服务端接收前端给到的分片，当所有分片上传完成之后，合并所有分片得到最终文件 * 后来解决了第一版存在的两个问题 * 对大文件切片，导致主线程被长时间占用。这点通过将切片操作放到 Web Worker 来解决 * 大量并发，导致 QPS 过高，这里通过并发控制的方式来实现，并结合 Worker 实现切片 + 上传协同完成 * 有了分片逻辑，接下来实现了断点续传，提升上传效率。逻辑很简单，就是上传前获取到当前文件已上传的切片列表，然后在上传切片之前查看该切片是否已经上传，如果已上传，直接跳过，从而避免文件从头上传 * 最后，通过 HTTP1.1 慢启动问题，引出了切片大小的设计，一般是 5MB 左右 [配套代码仓库](https://github.com/liyongning/file-upload)