--- theme: cyanosis --- 来分享一篇技术文章，花费一天的时间，一下午的代码一上午的文章，大文件上传，看看我的技术方案是否符合你当下的需求。不知道各位的解决方案都是怎么样的。我这里使用的是 vue3 + express 用什么都无所谓。 ## [源代码地址](https://github.com/Githubkuankuan/largeFileUpload) 帮忙去点下star🌟 感谢！ ### 大文件上传的场景 > 如果遇到需要上传电影、视频或者特别大的数据之类的需求，那么上传的文件是非常大的，这个时候我们不能说用一个请求就直接将所有的文件传输过去，因为这个大文件上传时间相比较来说是比较长的，存在很多的弊端，假如用户刷新了页面之类的情况，这时候上传又需要重头开始上传，这对用户以及服务器都是不妥的。首先想几个问题： 1. 怎么判断文件是否上传过了，再上传就重复了？ - 有人会说我通过判断文件名不可以吗？No - 那我判断文件名和最后修改时间？No 有个别情况会产生重复 - 针对文件生成 hash 值（唯一标识），这种首先可以判断是否是重复的文件，又可以解决分片上传时，每一个chunk最后的归属。 1. 如果一个文件已经上传过了，下次上传如何处理？ - 当然是直接返回一样文件的链接了。（秒传） 1. 如果用户不小心点了刷新，再上传时如果处理？（断点续传） - 刷新之前的chunk已经存在了，没有必要再进行重新上传，所以可以返回最后一个上传的index值。 1. 上传到最后，需要将所有上传过的chunk进行合并成文件。 1. [可以看一下这篇博客](https://www.cnblogs.com/goloving/p/12825973.html) 需要解决的基本问题 - 对大文件进行分片上传 - 对文件进行hash处理 - 上传的实时进度 - 上传中断后再次上传跳过已经上传的部分（断点续传）这些都比较简单，难得是如何优化上传体验，以及上传效率。 ### 前端主要代码 > [spark-md5-npm链接](https://www.npmjs.com/package/spark-md5) ```vue ``` ### 后端主要代码 ```js // 上传 app.post("/upload", (req, res, next) => { const form = new multiparty.Form(); form.parse(req, (err, fields, files) => { console.log(fields, files); if (err) { next(err); return; } let pa = path.join( __dirname, "./public/upload/chunk/" + fields["filename"][0] ); let filePa = path.join( __dirname, "./assets/", `${fields.filename}.${fields.extname}` ); // 判断是否是断点续传 if (fs.existsSync(pa) && parseInt(fields.index[0]) === 0) { // 存在该目录 // 返回最大的索引 let maxIndex = 0; let arr = fs.readdirSync(pa); /** * 如果前端传递的文件名称为 index + @ + name 的话 * 就不需要这种方式进行过滤出最后一次上传时的index了 */ // for (let i = 0; i < arr.length; i++) { // let str = parseInt(arr[i].split("@")[0]); // if (str > maxIndex) { // maxIndex = str; // } // } res.send({ code: 300, msg: "存在该目录，请继续上传", index: arr.at(-1).split("@")[0], }); } // 判断文件是否已经存在 else if (fs.existsSync(filePa)) { res.send({ code: 201, data: "/" + fields.filename + "." + fields.extname, }); } else { // 将每一次上传的数据进行统一的存储 const oldName = files.chunk[0].path; const newName = path.join( __dirname, "./public/upload/chunk/" + fields["filename"][0] + "/" + fields["name"][0] ); // 创建临时存储目录 fs.mkdirSync("./public/upload/chunk/" + fields["filename"][0], { recursive: true, }); fs.copyFile(oldName, newName, (err) => { if (err) { console.error(err); } else { fs.unlink(oldName, (err) => { if (err) { console.error(err); } else { console.log("文件复制和删除成功"); } }); } }); res.send({ code: 200, msg: "分片上传成功", index: parseInt(fields["index"][0]), }); } }); }); // 合并请求 app.post("/mergeFile", (req, res, next) => { const fields = req.body; thunkStreamMerge( path.join(__dirname, "./public/upload/chunk/", fields.filename), path.join(__dirname, "./assets/", fields.filename + "." + fields.extname) ); res.send({ code: 200, data: "/" + fields.filename + "." + fields.extname, }); }); const thunkStreamMerge = (sourceFiles, targetFile) => { const list = fs.readdirSync(sourceFiles); console.log(list); const chunkFilePathList = list.map((name) => ({ name, filePath: path.resolve(sourceFiles, name), })); const fileWriteStream = fs.createWriteStream(targetFile); thunkStreamMergeProgress(chunkFilePathList, fileWriteStream, sourceFiles); }; const thunkStreamMergeProgress = (fileList, fileWriteStream, sourceFiles) => { if (!fileList.length) { fileWriteStream.end("完成了"); if (sourceFiles) fs.rm(sourceFiles, { recursive: true, force: true }, (error) => { console.error(error); }); return; } const data = fileList.shift(); const { filePath: chunkFilePath } = data; const currentReadStream = fs.createReadStream(chunkFilePath); currentReadStream.pipe(fileWriteStream, { end: false }); currentReadStream.on("end", () => { thunkStreamMergeProgress(fileList, fileWriteStream, sourceFiles); }); }; ``` 这样就已经实现了断点续传、分片上传、秒传功能，但是呢！有问题，如果你不方便执行代码，直接看我这里的效果。 ### 有问题

我的文件大小是

时间长短问题这个避免不了，但是有没有注意到我在疯狂的按键盘，就是显示不出来，当解析完成之后全部都显示出来了。我的页面是卡住的状态。查看控制台打印的执行时间： ```js ... console.time("文件加载使用的时间"); fileReader.onload = (e) => { console.timeEnd("文件加载使用的时间"); console.time("文件生成hash使用的时间"); hash.append(e.target.result); fileMd5.value = hash.end(); console.timeEnd("文件生成hash使用的时间"); // upload(0); }; ... ``` 添加 console.time 查看时间消耗，就是生成hash阻塞了。时间还是非常的长。 ### 所以要进行优化根据上边提供的 npm spark-md5 的链接，查看官方案例可以进行追加内容，生成最后的 hash 值。其实这种又是分片，如果是分片那么我们就可以提升一下用户体验，添加一个实时解析的进度。上代码。 ```js ... fileReader.onload = (e) => { hash.append(e.target.result); ii++; if (ii < fileList.value.length) { readerChunk(); } else { ii = 0; fileMd5.value = hash.end(); loading.value = false; upload(0); } }; function readerChunk() { // 解析的进度 parsePercentage.value = (((ii + 1) / fileList.value.length) * 100).toFixed( 2 ); fileReader.readAsArrayBuffer(fileList.value[ii]); } readerChunk(); ... ``` 这样做页面也可以正常的操作，不会出现卡死的情况，并且还会反馈用户解析的实时进度。老规矩如果不方便执行代码，看我的效果。

目前的效果就先这样吧，后边才追加新的功能。其实还有好几个点可以做优化： 1. 前端可以并发的去发请求。 1. 添加暂停功能 1. 如果第一次上传没有上传完，中断了，那么间隔多长时间必须来进行下面的上传，如果不上传则清除之前的chunk。 1. 美化一下样式 1. 管理所有上传完成的文件