图片按照顺序上传

4 篇文章 0 订阅

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

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

这里我使用的组件是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了一下也并没有找到什么好的解决方案,如果一定要追求绝对的顺序,从目前来看只能要求业务对文件的命名有一定的顺序,或者在上传之后给业务开放一种排序的功能。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值