layui多图上传图片顺序错乱及重复上传解决

使用layui的多图上传时发现,图片上传到后台,提交表单后,图片顺序与选择的顺序不一致并出现图片重复上传

后发现layui是将多图在前台转为队列,一张张向后台传输,后台处理数据后再回传到前台。但是传输和回填数据是异步进行的,导致回填数据的顺序可能与前台添加数据顺序不一致。控制台中打印choose与done的index结果如下图:在这里插入图片描述可以看到choose与done的index不一致。
下面是错误示范
html:

<div class="layui-form-item fl mr20 mb20">
     <button type="button" class="layui-btn" id="test2">图片上传</button>
     <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
         预览图:
         <div class="imglist mt10" id="demo2"></div>
     </blockquote>
</div>

js:

//多图片上传
upload.render({
   
    elem: '#test2'
    ,url: "{:url('/api/Upload/upload_img')}"
    ,accept: 'images'
    ,size: 5120
    ,multiple: true
    ,number: 9
    ,choose: function(obj){
   
        //预读本地文件示例,不支持ie8
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        obj.p
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值