需求

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

背景

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

解决

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

            <el-form-item label="商品详情：" prop="picUrls">
              <el-upload
                :action="uploadUrl()"
                ref="upload"
                :limit="10"
                :headers="headers"
                :before-upload="beforeUpload"  // 上传之前
                :on-success="handleAvatarSuccess"
                :on-error="error"
                :on-remove="handleRemove"
                :data="isAsync"
                multiple  //批量上传
                name="files"
                list-type="picture-card"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

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

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

可以看到每一项有一个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 !!!!