关于element-ui的upload组件实现自动上传多张图片的功能

## 前言：
最近产品经理有个需求就是用饿了么组件上传图片之后自动上传的功能，虽然前面一篇文章有写借用upload组件实现上传文件的功能，觉得实现上传图片的功能应该是小菜一碟没想到做到时候遇到了很大的一个坑。

代码：

<div class="upload-wrap" v-show="MType != 'Mview'"  @click.stop="getIndex(everyindex,index,numindex)">
                  
             <el-upload
                 action="htt"
                 ref="imgUploadRef"
                 :show-file-list="false"
                 list-type="picture-card"
                 accept="image/*"
                 :http-request="uploadImg"
               	 multiple
                 :on-success="photoSuccess"   
                 title="">
                 <i class="el-icon-plus"></i>
              </el-upload>
              </div>
            </div>
  async uploadImg(params){
        let fd=new FormData()
        fd.append("uploadFile[]",params.file)
         let {data}=await this.$axios({
                  url: httpUrl + '/web/Home/SysApi/sysSaveUploadFiles',
                  method: 'POST',
                  data:fd
              })
          if(data.success){ 
                     let photoArr=""
                    data.new_data.forEach((item,index,arr)=>{
                      this.imgUrl[item.url]=1
                     })
                     for(let key in this.imgUrl){
                      photoArr=key+"<$>"
                     }
          let str= this.BillData[this.imgFirstIndex].dataItem[this.imgSecondIndex].item[this.imgThirdIndex].val
          if(str){//判断当前用户是否已经有了图片，如果有了就将旧图添加到photoArr中
             photoArr=str+photoArr
          }
        this.BillData[this.imgFirstIndex].dataItem[this.imgSecondIndex].item[this.imgThirdIndex].val=photoArr
              this.$vs.notify({
                    title: "Success",
                    text: "图片上传成功",
                    color: "success"
                });
        }else{
             this.$vs.notify({
                    title: "Error",
                    text: "图片上传失败",
                    color: "danger"
                });
        }
      },

在这里要提一下accept这个属性，官方解释的是接受上传的文件，比如： accept=“image/*”。这样用户在选择上传的时候只会显示图片类型的 (这里加上这个之后就可以不用做用户文件的类型判断了)。大家都知道设置了http-request之后on-success、on-error等钩子函数就不会触发了，但是想告诉大家的是这个函数是可以触发的。在http-request中是可以传一个参数的，虽然官方文档上面没有写。这个参数是用户选择的一些数据 以及success、error、progress等钩子函数。

上传图片的坑：
多张图片同时上传的时候upload组件并不是那么的友好，你选择多张图片它其实是一张一张的上传，然后uploadImg就会调用多次。然后你再保存图片的时候就会有重复的图片。这里去重使用的将url保存为对象的键名的方式实现的。再然后就是将所有上传的图片以"<$>"的形式保存到数据库中。