element批量上传图片展示顺序错误问题/批量自动上传之后顺序错误/上传图片按顺序展示

需求

在做后台商品详情图片上传时，需求希望可以实现批量上传，并且按照顺序进行展示。

背景

vue+element ui 项目。
此时上传功能已经实现，但是是单张自动上传，so ... 在此基础上实现需求

解决

首先批量上传我们只需要加上一个属性 multiple 就OK了，但是上传之后的图片顺序出现了错误，或许是因为网络原因，或者图片大小不同导致的上传成功的顺序不同，接下来来解决。
在上传组件中，有 before-upload 钩子,可以获取到将要上传正确顺序的图片（此时还未上传,可读取到批量上传图片的每个file）

此时在beforeUpload（file）中，可以获取到每一项file，log出来如下

  beforeUpload(file) {
      console.log(file);  
    }

image.png

可以看到每一项有一个UID，那么我们可以在data中定义一个空的数组beforeArr，将每一项file，push到beforeArr中，那么我们就获取到了正确顺序的图片相对应的UID

this.ruleForm.picUrls是我的项目中最后提交表单所存放商品详情数据的数组

因为我们在上传成功之后进行UID对比的时候用到了splice,所以在这里我们需要对this.ruleForm.picUrls也push一份 file ，这里的push操作，只是进行一个占位的操作

beforeUpload(file) {
      this.beforeArr.push(file);
      this.ruleForm.picUrls.push(file); // 占位 为上传成功之后的splice方法做准备
    },

接下来在成功上传的钩子 :on-success="handleAvatarSuccess" 中，将按照正确顺序beforeArr中的UID，为上传成功猴返回来的URL进行正确的排序

   handleAvatarSuccess(res, file) {  // 上传规格图片成功钩子函数
      this.beforeArr.forEach((item, index) => {
        if (item.uid == file.uid) {  // 与正确顺序的UID进行比对，添加进将要上传后台的数组
          this.ruleForm.picUrls.splice(index, 1, res.data[0].url); 
        }
      });
    }

好啦，到这里就可以搞定批量上传之后顺序错误的问题了！！！
要注意的是在上传之后或许会进行删除操作，一定要记得删除掉 this.beforeArr 中uid相同的那一项

OKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK !!!!