React实现前端大文件分片上传,任务队列控制并发数量

322 阅读2分钟

最近做了一个大文件上传的需求,分片的理解简单概述,其实就相当于你去动物园喂动物,由于笼子大小或者卖家商业思维或者小动物实在一次行吃不了一个大苹果,(这里是互联网策略一次上传不了那么大的文件),于是卖家给了你一个苹果,切成了一根一根,你只能一根一根喂你心爱的小动物。(这里就是你要把大文件切割成一片一片的,分片上传。)

同时在此基础上,因为你爱的小动物一次可以吃三四根甚至五六根的苹果条(嘴巴塞得下),你觉得一根一根给孩子吃太慢了,你寻思我一次给他拿个四五根不行吗?反正笼子的窟窿能塞下,比如一次给他4根,他吃完4根我在给4根,是不是比一次1根快多了?(猴子可能有时候一次性吃了2根还剩两根,你就寻思只要他手里不满足4根,我就塞,让我的猴子手里一直是满的),这就是设置并发数量,控制一次可以上传多少个请求。这时候你可能就会想到promise.all, 通常promise.all会去做批量请求这个事情,这里选的的任务队列的方法。

废话不多说,直接讲思路。

做法分两步

  1. 将大文件分成一定大小的数量(常见的上传)
  2. 设置并发数量,控制一次上传多少个请求,这可以帮助提高上传速度和性能(主要有Promise.all或者队列等方式)

常见分片做法

123.png

常见队列封装例子

upload.png

在以上两个原则相结合,在设置一下边界(最大并发数量【根据不同网络环境带宽】,最大/小切片数量,切片文件大小,最小多少不用切割)等,就可以了。

  1. Uploader组件中定义一个状态变量来存储上传队列和当前正在上传的分片:

1234.png

  1. 切割文件成多个分片,并添加到上传队列中

12345.png

  1. 创建一个处理上传队列的函数,并使用axios库来发送分片上传请求。并且在每个分片上传完成后,从上传队列中移除该分片

123456.png