使用队列并发上传图片
背景
最近在写图片上传功能,使用antd提供的upload组件,并使用beforeUpload
函数拦截,再批量读进浏览器之后手动上传。
第一次实现
传输使用的协议是http2,如果不做处理,并发传输的数量没有限制。第一次的实现使用Promise.all
,并发传输,测试时,使用单张16.7M的图片,同时上传20张,会给后端带来不小的压力,多次测试中都会有部分图片上传失败,返回502或504。
使用Promise.all
的实现方式带来的问题是:
- 没有并发的数量限制,会占用大量带宽,同时给后端带来压力;
Promise.all
的执行方式是全部成功才算成功,有一个失败即算失败,就会将这个失败的结果返回,不管其他的项是否完成,这带来的问题是每一个失败的err没有办法单独隔离处理,导致没有办法进行后续操作,比如单独重新上传,也就是说,使用Promise.all
没有办法单独对每一项进行操作,限制了灵活度。
优化的上传策略
改进的实现使用下面这种传输策略:
创建比如3个transmitter,点击发送按钮时,三个transmitter并发发出一张图片,哪个transmitter完成自己的发送任务,就去任务队列中拿下一张图片发送,直至全部图片发送完成。
下面是传输策略的实现。