图片按照顺序上传

最近遇到一个文件上传的需求,这里记录一下:

产品希望的效果是可以按照在客户端选择的顺序上传,并且展示在页面中

这里我使用的组件是antd的Upload组件,该组件支持多文件上传,但是其对于多个文件上传的处理通过在控制台中就可以看到其实是一个一个文件调用接口上传的,这样的话因为文件大小不一致,小的文件就会先返回回来,大的文件就会慢一点,这样的话就会导致最终传递到后端的文件链接顺序和当初选择的顺序是不一致

对此此类问题网上的解决方案一般有两种,一种是先把所有的文件先存到一个数组中,等所有文件上传完成之后再统一调用;第二种解决方案是使用ES6提供的async和await,使得上传文件同步进行。我这里采用的是第一种解决方案。等我写完代码测试的时候发现我在本地选择的文件顺序和在Upload中的fileList中的顺序不能保证100%一致性,文件上传完成之后是按照文件名的顺序来排序的,而不是按照选择的顺序来排的。

比如说我在客户端选择的顺序是:2.png,1.png,3.png,但是在Upload中fileList顺序却是1.png,2.png,3.png,无论这三张图片如果调用选择顺序,都是这个结果。

开始我以为是这个组件的问题,就使用了原生的input=file测试了一下,也是这种效果,看来并不是这个组件的问题。后来Google了一下也并没有找到什么好的解决方案,如果一定要追求绝对的顺序,从目前来看只能要求业务对文件的命名有一定的顺序,或者在上传之后给业务开放一种排序的功能。

你可能感兴趣的:(react,antd)