完美解决Vue+element-ui 中upload组件使用多个时无法绑定对应的元素

完美解决Vue+element-ui 中upload组件使用多个时无法绑定对应的元素
项目时间赶,未来得及封装组件,莫怪莫怪!

我们在一个列表中分别都需要有upload组件的时候也就涉及到了多个upload同时存在；因为一般可以在success回调中拿到上传成功的图片已经成功的response，多个也可以，这个没毛病；

文档如下：

on-success 文件上传成功时的钩子 function(response, file, fileList)

但是，当多个同类型的upload同时存在的时候，我在怎么知道回调里面的fileList该与谁关联呢？

费话不多说,直接上代码,这里使用的是input直接上传的

html部分

<el-col :span="24" class="ab" v-for="(item,index) in SupList" :key="item.id">
    <el-col :span="13">
        <input type="file" @change="getFile($event,index)" ref="file" id="file">
    el-col>
el-col>

JavaScript部分,包括上传服务端代码,换成自己的接口就好了

    getFile(e, index) {
      let _this = this;
      let file = e.target.files[0];
      if (!e || !window.FileReader) return; // 看支持不支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(file); // 这里是最关键的一步，转换就在这里
      reader.onloadend = function (e) {
        // _this.SupList[index].picture = this.result;
        let param = new FormData(); //创建form对象
        param.append('picture', file, file.name);//通过append向form对象添加数据
        param.append('picture_type', '1');//添加form表单中其他数据
        console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: { 'Content-Type': 'multipart/form-data' }
        };  //添加请求头
        axios.post('你自己的上传接口', param, config)
          .then(response => {
           //根据自己需要做数据处理
          })
      };
    },