解决upload组件自动上传多张图片并转换为id后，删除图片的bug

业务需求：可上传多张图片（用接口把图片转为id），并将转换后的图片id作为参数传给另一个接口。接收的字段格式：site_photos：[ 2, 3, 4 ]

出现的bug：由于设置的upload组件自动上传属性，id存到一个数组里，但是点击移除图片时，暂存在数组里的id并没有被移除，导致原本移除的图片上传成功。

解决思路： 在upload组件自带的 on-success 文件上传成功触发的钩子中，把图片转换后的id和file.uid存到一个数组中。点击移除图片触发的on-remove文件移除触发的钩子，移除的file.uid通过和原数组对比，也删掉对应的id。最终筛选数组中的id

代码：

1. template

   <p>上传验收照片</p> 
   <el-upload
    class="upload-demo"
    ref="upload"
    :data="photoAccept"
    :on-remove="handleRemove"
    :file-list="fileList"
    name="image"
    :on-success="handle_success"
    :on-change="change"
    :before-upload="beforeAvatarUpload"
    drag
    accept=".jpg,.jpeg,.png,.gif"
    :action="url"
    :headers="headers"
    multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
          <div class="el-upload__tip" slot="tip">支持扩展名：.jpg、.jpeg、.png、.gif</div>
      </div>
    </el-upload>

2. js

on-success、on-remove的形参file数据如下：

<script>
  data() {
    return {
      fileList: [],
      idFilelists: [],
      confirmList:{
        site_photos: ''
      }
    }
  }
  methods: {
    //文件上传成功触发的钩子
    handle_success(res,file,fileList) {
      this.fileList = fileList
      if(res.data.id){
        this.idFilelists.push({uid:file.uid, id:res.data.id})
        console.log("this.idFilelists成功", this.idFilelists)  
      }
     },
     // 文件移除触发的钩子
     handleRemove(file, fileList) {
       // 找出删掉的uid  删除第一张图片
       var result = this.idFilelists.findIndex(function(item,index) {
         if (item.uid == file.uid) {
           return index;
         }else{
           return index;
         }
       })
       //delete this.idFilelists[result]   经过测试不能用delete 因为它删掉后还留有位置
       this.idFilelists.splice(result,1)
       console.log("this.idFilelists result",this.idFilelists)
       },
     confirm(){
       //把id提取出来，转换为想要的格式
       this.idFilelists.forEach((item)=>{
         this.confirmList.site_photos = item.id+','+this.confirmList.site_photos
       })
       // 删掉最后一个逗号
       this.confirmList.site_photos = this.confirmList.site_photos.slice(0,-1)
       console.log("this.idFilelists result",this.confirmList.site_photos)  //3904
       }
     }
</script>

这样删掉file之后，也可以同步删掉图片id啦