式优化

本文适合有一定node后端基础的前端同学,如果对后端完全不了解请恶补前置知识。

等级功能青铜-垃圾玩意原生axios.post白银-体验升级粘贴,拖拽,进度条黄金-功能升级断点续传,秒传,类型判断铂金-速度升级web-worker,时间切片,抽样hash钻石-网络升级异步并发数控制,切片报错重试王者-精雕细琢慢启动控制,碎片清理等等

文件上传,我们需要获取文件对象,然后使用formData发送给后端接收即可

function

FormData();formData.append(newFile,

file);axios.post(http://localhost:8000/uploader/upload,formData,

headers:

我们通过将一个文件分为多个小块,保存到数组中.逐个发送给后端,实现断点续传。

计算文件hash作为id

${hash}_${i}};fileList.push(item);

计算hash

为了让后端知道,这个切片是某个文件的一部分,以便聚合成一个完整的文件。

我们需要计算完整file的唯一值(md5),作为切片的文件名。

input

使用SparkMD5计算文件hash,读取文件为blob,计算hash

let

SparkMD5.hash(e.target.result);console.log(hexHash);

断点续传秒传(前端)

我们此时有保存了100个文件切片的数组,遍历切片连续向后端发送axios.post请求即可。

设置一个开关实现启动-暂停功能。

此时我们需要后端配合在上传文件之前先检查一下后端接收了多少文件。

const

axios.get(http://localhost:8000/uploader/count

?hash${hash}

--------通过hash查询服务器中已经存放了多少份文件(或者是否已经存在文件)------

function

${uploadChunksDir}${hash};const

chunksList

因为上传前我们需要计算文件的md5值作为切片的id使用。

md5的计算是一个非常耗时的事情如果文件过大js会卡在计算md5这一步造成页面长时间卡顿。

我们这里提供三种思路进行优化

抽样hash是指我们截取整个文件的一部分计算hash提升计算速度。

抽取文件头尾2mb,

---------------抽样md5计算-------------------

function

{chunks.push(file.slice(index));}

else

2;chunks.push(file.slice(index,

index

{spark.append(event.target.result);resolve({hash:

spark.end(),//Promise返回hash});}reader.readAsArrayBuffer(new

Blob(chunks));});

除了抽样hash我们可以另外开启一个webWorker线程去专门计算md5。

webWorker:

就是给JS创造多线程运行环境允许主线程创建worker线程分配任务给后者主线程运行的同时worker线程也在运行相互不干扰在worker线程运行结束后把结果返回给主线程。

Web

熟悉React时间切片的同学也可以去试一试不过个人认为这个方案没有以上两种好。

不熟悉的同学可以自行掘金一下文章还是很多的。

这里就不多做论述只提供思路。

时间切片也就是传说中的requestIdleCallbackrequestAnimationFrame

这两个API了或者高级一点自己通过messageChannel去封装。

5.文件类型判断

简单一点,我们可以通过input标签的accept属性,或者截取文件名来判断类型

input

file.name.substring(file.name.lastIndexOf(.)

1);

我们将文件转化为二进制blob文件的前几个字节就表示了文件类型我们读取进行判断即可。

比如如下代码

我们需要将多个文件片段上传给后端总不能一个个发送把我们这里使用TCP的并发实现控制并发进行上传。

首先我们将100个文件片段都封装为axios.post函数存入任务池中

传入下一个请求(递归)

concurrentSendRequest(requestArr:

any,

requestArr[i]()concurrentRequestArr.push(it)//TODO

任务执行后

{concurrentRequestArr.splice(concurrentRequestArr.indexOf(it),

1)})//todo

Promise.race(concurrentRequestArr)}//todo

race中最快完成的promise,在其.***n递归toFetch函数if

(globalProp.stop)

最后一组任务全部执行完再执行回调函数(发起合并请求)(如果未合并且未暂停)toFetch().***n(()

Promise.all(concurrentRequestArr).***n(()

{if

使用catch捕获任务错误上述axios.post任务执行失败后重新把任务放到任务队列中

如果一个切片任务出错超过3次直接reject。

并且可以直接终止文件传输

8.慢启动控制

由于文件大小不一我们每个切片的大小设置成固定的也有点略显笨拙我们可以参考TCP协议的慢启动策略。

设置一个初始大小根据上传任务完成的时候来动态调整下一个切片的大小

·chunk中带上size值不过进度条数量不确定了修改createFileChunk

请求加上时间统计

·比如我们理想是30秒传递一个。

初始大小定为1M如果上传花了10秒那下一个区块大小变成3M。

如果上传花了60秒那下一个区块大小变成500KB

9.碎片清理

如果用户上传文件到一半终止并且以后也不传了后端保存的文件片段也就没有用了。

我们可以在node端设置一个定时任务setInterval,每隔一段时间检查并清理不需要的碎片文件。

node-schedule

来管理定时任务比如每天检查一次目录如果文件是一个月前的那就直接删除把。

垃圾碎片文件

以上就是一个完整的比较高级的文件上传组件的全部功能希望各位有耐心看到这里的新手小伙伴能够融会贯通。

每天进步一点点。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers:

https://link.juejin.cn?targethttps%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FWeb_Workers_API%2FUsing_web_workers

[2]

https://juejin.cn/post/7139718200177983524:

https://juejin.cn/post/7139718200177983524

[3]

https://www.npmjs.com/package/file-type:

https://link.juejin.cn?targethttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ffile-type