JavaScript--大文件上传的伪代码实现

2022-04-17 本文已影响0人习惯水文的前端苏

$\bullet$ 前言

猛的，我想起上一次找工作时被问到的大文件上传，故现在借此实现下，也算是为面视做了准备了吧

$\bullet$ 分析

使用File对象原型链上的slice函数对文件进行分块，同时为每一块打上唯一性标识和序号，最后对每一个分块作单独的ajax请求，当所有子块均上传完毕后，再发起合并请求，让后台对分块进行合并即可

$\bullet$ 实现

我本来是打算用vue3写的，奈何网太差，项目半天初始化不好，故直接使用jq，页面效果如下

当获取到文件后，对文件进行拆分，比如以2M作为拆分标准，拆成file.size/2个请求，如果同一个文件被多次上传，则需要能有一个标识标记出是同一文件从而忽略（这一般都是后台的事儿了），这里可用借助SparkMD5来生成唯一hash文件标识

框出的位置则是对文件分成不同的chunk，并按chunk发送给后台

分块完成后，便可以生成唯一hash值并发送分块请求

对于进度条的实现则可以借助axios的onUploadProgress函数，我这里胡乱模拟了一个

最后就是使用Promise.allSettled来获取每一个分块请求的结果，如果存在失败的，则重发即可

$\bullet$ 写在最后

一开始是想做一个完整的，但是时间未必都是海绵里的水，挤一挤未必都有，不过也有一些实现的思路：

$\ast$ 使用koaBody中间件处理post请求，在其onFileBegin函数中接收前端传递的chunk信息并使用fs的文件读写能力保存到本地

$\ast$ 使用读写流读取本地的分块文件，并进行合并，最后删除对应的块文件即可