使用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.