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

开发者 · 2024-10-3 15:50:23

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

分析
使用File对象原型链上的slice函数对文件举行分块，同时为每一块打上唯一性标识和序号，末了对每一个分块作单独的ajax哀求，当全部子块均上传完毕后，再发起归并哀求，让背景对分块举行归并即可

实现
我原来是筹划用vue3写的，怎样网太差，项目半天初始化不好，故直接使用jq，页面效果如下

当获取到文件后，对文件举行拆分，比如以2M作为拆分标准，拆成file.size/2个哀求，假如同一个文件被多次上传，则须要能有一个标识标记出是同一文件从而忽略（这一般都是背景的事儿了），这里可用借助SparkMD5来天生唯一hash文件标识
框出的位置则是对文件分成差异的chunk，并按chunk发送给背景
分块完成后，便可以天生唯一hash值并发送分块哀求
对于进度条的实现则可以借助axios的onUploadProgress函数，我这里胡乱模仿了一个
末了就是使用Promise.allSettled来获取每一个分块哀求的效果，假如存在失败的，则重发即可
写在末了
一开始是想做一个完备的，但是时间未必都是海绵里的水，挤一挤未必都有，不外也有一些实现的思绪：

使用koaBody中心件处置惩罚post哀求，在其onFileBegin函数中接收前端转达的chunk信息并使用fs的文件读写本领生存到本地

使用读写流读取本地的分块文件，并举行归并，末了删除对应的块文件即可

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

所属分类: 问答交流

新帖推荐: 30日

推荐作品