--- theme: fancy highlight: atom-one-dark --- ## 前言在[《大文件上传实现-基础上传功能》](https://juejin.cn/post/7324933059819995162) 这篇文章中，实现了前后端基础的上传文件功能，前端包括选择文件、拖拽文件、展示文件、上传文件显示上传进度等功能，后端则是接收文件功和存储文件功能。值得注意的是：采用流的传输方式，`Content-Type` 用 `application/octet-stream`！ ![8.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa46f2b652664326ba850c1ce292d30d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=2828115&e=gif&f=157&b=1d1d1d) 这篇文章是[大文件上传实现专栏](https://juejin.cn/column/7322305256171700264)的第二篇文章，将在上一篇文章实现功能的基础上，进行升级迭代，逐步实现文件切片上传功能。如果没有看上一篇，可以花点时间先看看。 ## 需求分析分片上传功能，就是大文件切分小文件，同时上传，完成之后在服务端合并起来，以此来提高上传速度。那么前端要做的就是切片，即大文件切成多个文件片段，同时上传。后端要做的就分成两步，一步是接收文件片段，一步是合并文件。 ## 实现切片功能 ### 实现后端切片上传接口上一节，上传之后的文件放在了 temp 目录下面，但要做分片上传然后合并，得分两个文件夹，一个用来放分片的，一个用来放合并之后的文件。合并之后存放文件的文件夹，定为 uploads。 index.js 文件修改如下代码，建立了临时文件夹和上传文件夹。 ```js // 临时文件夹，切片文件将会被上传到这个文件夹中 const TEMP_DIR = path.resolve(__dirname, "temp"); // 上传文件夹，文件将会被移动到这个文件夹中 const UPLOADS_DIR = path.resolve(__dirname, "uploads"); // 确保临时文件夹存在 fs.ensureDir(TEMP_DIR); // 确保上传文件夹存在 fs.ensureDir(UPLOADS_DIR); ``` 实现上传接口，将文件切片放到临时文件夹里面，按照文件名区分不同文件，属于同一文件的切片放到一起。 ```js app.post("/upload/:filename", async (req, res) => { // 获取文件名 const { filename } = req.params; // 切片名 const { chunkFilename } = req.query; // 拼接切片文件夹路径 const chunkDir = path.resolve(TEMP_DIR, filename); // 确保切片文件夹存在 await fs.ensureDir(chunkDir); // 拼接文件路径 const chunkPath = path.resolve(chunkDir, chunkFilename); // 创建可读流 const ws = fs.createWriteStream(chunkPath); // 将可读流中的数据写入到可写流中，完成文件上传 await pipeStream(req, ws); // 响应结果 res.json({ success: true }); }); ``` 辅助函数`pipeStream`是上一篇文章提到的，这里再看一遍： ```js /** * 数据从可读流流向可写流 * @param {ReadableStream} rs 可读流 * @param {WritableStream} ws 可写流 * @returns 返回一个Promise，当流结束时，Promise会被resolve */ function pipeStream(rs, ws) { return new Promise((resolve, reject) => { rs.pipe(ws).on("finish", resolve).on("error", reject); }); } ``` 用 postman 测试一下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4e0594ef4dd4e8184b3ba3af8e313ac~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1954&h=960&s=161137&e=png&b=fdfdfd) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf5e2a25c9594c66981437c9daa8cee3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1952&h=914&s=145127&e=png&b=fdfdfd) ![10.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1003d86f17c942ccbf94099fe2045002~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=1049923&e=gif&f=97&b=1c1c1c) 上面用整个文件测试，换成切片也一样，都要上传文件名，切片名（序号拼接文件名）。 ### 实现前端切片上传功能前面在做前端上传功能的时候，一直用的是文件本身的文件名，但文件名是可以改的，如果相同文件名，那么就会覆盖了上传在服务端的文件，因此对应一个文件，应该得有一个唯一的标识作为文件名，避免重复。那么就需要对文件进行“摘要”了，这里用到 `SubtleCrypto.digest()`api, [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/SubtleCrypto/digest)。 src 目录下面新建一个 getFilename.js 文件，实现如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8dcd2e920614fe09a8eff9e7baa35f0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2184&h=1588&s=409787&e=png&b=1d1d1d) ```js /** * 对文件摘要拿到文件名，耗时操作 * @param {File} file 文件对象 * @returns 文件名 */ async function getFilename(file) { // 获取文件后缀名 const extension = file.name.split(".").pop(); // 获取文件摘要 const digestName = await calculateDigest(file); return `${digestName}.${extension}`; } /** * * @param {File} file 文件对象 * @returns 返回十六进制的字符串 */ async function calculateDigest(file) { // 读取文件buffer const arrayBuffer = await file.arrayBuffer(); // 计算摘要buffer const digestBuffer = await crypto.subtle.digest("SHA-256", arrayBuffer); // 转换为十六进制字符串 const digestArray = Array.from(new Uint8Array(digestBuffer)); const digestHex = digestArray .map((b) => b.toString(16).padStart(2, "0")) .join(""); return digestHex; } export default getFilename; ``` 看一下效果 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95507a6774434316aeac35b6db0143e8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2344&h=1998&s=483319&e=png&b=1d1d1d) ![11.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4835dda60901442e92d4994612365077~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=537&s=324472&e=gif&f=51&b=292929) 这是一个耗时操作，在按钮上面加一个`loading`效果。 ```html 开始上传 ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e26ddbafd494de2b1b6e77239be8c11~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2122&h=1734&s=417157&e=png&b=1d1d1d) 下面对文件进行切片处理，实现一个将文件进行切片的函数。测试的视频文件1.5G，暂定文件切片大小 100M, src 下面新建一个 createChunks.js 文件，如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a75ac0930bd46bda42ac32e668a923e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2066&h=1284&s=328516&e=png&b=1d1d1d) ```js /** * * @param {File} file 文件对象 * @param {Number} chunkSize 切片大小 * @param {String} filename 文件名 * @returns 切片数组 */ export default function createChunks(file, chunkSize, filename) { // 兼用处理 filename = filename || file.name; const chunks = []; // 计算切片数量 const count = Math.ceil(file.size / chunkSize); // 循环切片 for (let i = 0; i < count; i++) { // 获取到切片 const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize); // 拼接对应的切片文件名 const chunkFilename = `${i}-${filename}`; chunks.push({ chunk, chunkFilename, }); } return chunks; } ``` 试一下： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f62b62d5b2849b38fee7f7699f5a95e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2212&h=1586&s=382203&e=png&b=1d1d1d) ![12.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/203d3ed12256400db3e72861c5738847~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=537&s=945737&e=gif&f=93&b=292929) 效果如下，前面切片的大小都是一样的，最后一个小一点： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/411d4d6e0859450ea6d2bd365a20f398~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1730&h=1152&s=432903&e=png&b=292929) 现在有了切片，文件名，切片名，可以进行上传了，之前是单个文件上传，现在是多个，用循环进行多个请求，在`Promise.all`之后拿到最终的请求结果： ```js const handleUpload = async () => { if (!selectedFile.value.file) { return ElMessage.warning("请先选择文件"); } const file = selectedFile.value.file; calculating.value = true; // 获取文件名 const filename = await getFilename(file); calculating.value = false; const CHUNK_SIZE = 100 * 1024 * 1024; // 创建分片 const chunks = createChunks(file, CHUNK_SIZE, filename); // 批量上传分片 const requests = chunks.map((chunkInfo) => { return axiosInstance.post(`/upload/${filename}`, chunkInfo.chunk, { headers: { "Content-Type": "application/octet-stream", }, params: { chunkFilename: chunkInfo.chunkFilename, }, onUploadProgress(progressEvent) { progressInfo.value[chunkInfo.chunkFilename] = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); }, }); }); await Promise.all(requests); ElMessage.success("上传分片完成"); }; ``` 注意这里，获取分片上传进度，改了一下，直接用分片名做键，进度做值： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ce17562466647f39d30b8d38e164065~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2584&h=1672&s=449602&e=png&b=1d1d1d) 模板也改下： ```html ``` 来看看效果： ![13.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2418e1a3fc3c4c09a9c0744621accfd7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=704&s=2822933&e=gif&f=154&b=1c1c1c) 可以看到，并发了15个请求，由于浏览器限制了同一个域名下最多并行发送6个请求，所以看到是6个并发进度，完了再继续后面的请求。到这里，分片部分的前端后端功能就完成了，下面进行文件合并功能开发。 ## 实现合并功能 ### 实现后端合并接口合并接口需要做的事情，就是接收文件名，然后根据文件名去 temp 文件下面查找对应的文件分片，将其合并放到 uploads 文件夹下面，代码如下（以100M的切片大小为例）： ```js ... // 切片大小 const CHUNK_SIZE = 1024 * 1024 * 100; // 100MB ... app.get("/merge/:filename", async (req, res) => { // 获取文件名 const { filename } = req.params; // 拼接切片文件夹路径 const chunkDir = path.resolve(TEMP_DIR, filename); // 读取切片文件夹中的文件名 const chunks = await fs.readdir(chunkDir); if (chunks.length === 0) { res.json({ success: false, message: "切片文件不存在" }); return; } else { // 按照切片的索引进行排序 chunks.sort((a, b) => a.split("-")[0] - b.split("-")[0]); // 将合并的文件名路径 const uploadsPath = path.resolve(UPLOADS_DIR, filename); // 写入文件的异步任务 const writeTasks = chunks.map((chunkFilename, index) => { // 拼接切片文件夹路径 const chunkPath = path.resolve(chunkDir, chunkFilename); // 创建可读流 const rs = fs.createReadStream(chunkPath) // 创建可读流 const ws = fs.createWriteStream(uploadsPath, { start: index * CHUNK_SIZE, }); return pipeStream(rs, ws); }); await Promise.all(writeTasks); // 合并完成后，删除切片文件夹 await fs.rm(chunkDir, { recursive: true, force: true }); return res.json({ success: true }); } }); ``` 整体合并流程就是：根据分片创建可读流，指定起始位置写入待合并的文件中（可写流），注意看可写流的配置参数`start: index * CHUNK_SIZE`，它控制可写流起始的偏移。前面我们计算得到的文件名是`321f84eca184e49fbdaea3683e6e6d0e4a1bd69bee988e6c3232ab2930574e85.mp4`, ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e91ee6c56d64d95862c6a69addc6a12~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1444&h=1302&s=381505&e=png&b=191919) 用 postman 来试一下: ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75ca9bcd1dda454ab2ed0aa7d351baae~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2278&h=806&s=156068&e=png&b=fdfdfd) ![14.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/459b80289f9f4961b982399ca0d02443~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=506&s=1430817&e=gif&f=97&b=1b1b1b) 没有问题，请求之后，切片被从temp文件夹下面，合并到了uploads文件夹下面了。到这里，合并的后端功能就算完成了，下面前端部分，前端上传完切片之后，再请求一下合并的接口就好了。 ### 前端调用合并请求 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6a2c735a7574510b40f10f8a0016cdc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2144&h=1222&s=344912&e=png&b=1d1d1d) ```js // 合并分片 axiosInstance.get(`/merge/${filename}`).then(() => { ElMessage.success("合并分片完成"); }); ``` 看一下效果： ![15.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55745182f56c421185fa344473c147dc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=756&s=2615726&e=gif&f=164&b=191919) ## 总结这篇文章在第一篇文章[《大文件上传实现-基础上传功能》](https://juejin.cn/post/7324933059819995162) 功能实现的基础上，进行分片上传的改造，完成了大文件切片上传的前后端功能，代码放在[gitee](https://gitee.com/GumplinGo/2_slice_upload)上面。下一篇文章[《大文件上传实现-秒传续传功能》](https://juejin.cn/post/7328329691352940571)，将在这篇文章的功能实现基础上，实现“秒传、断点续传”功能。文章如果有帮助，还望顺手点个赞和收藏，这是写文章的重要动力来源哦~