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

1.问题描述

element中upload为我们提供了强大的上传功能，往往我们可能用作单独上传某个文件。但是在一个列表中，需要有多个同种类型的上传组件，这时我们无法根据索引，将上传的文件放置在对应的数组索引中，例如：

<ul>
  <li v-for="(item, index) in List" :key="index">
    <el-upload></el-upload>
  </li>
</ul>

无法将学习资料1中上传的文件对应到学习资料数组中

image.png

2.如何解决？

思路，在触发上传或者上传成功时，在钩子函数中传入当前索引，上传成功后，根据索引，把上传的文件放到数组里，这是我能想到最通俗易懂的方法。
首先我们来看下element中upload的API

image.png

从以上图片，我们可以看到，上传的这几个钩子里面，都没有可以加的额外参数，那么直接在钩子中加入索引是不现实的。

2.1解决一：修改源码，在on-success回调中增加index索引

找到this.handleSuccess这个函数,你会发现源码中只有三个参数，res, file,和this.uploadFiles，这与官方文档中function(response, file, fileList)参数是一致的，现在我们来看下在这里面定义一个index参数后,on-success回调中，返回的参数是什么

handleSuccess: function handleSuccess(res, rawFile) {
      var file = this.getFile(rawFile);

      if (file) {
        file.status = 'success';
        file.response = res;

        this.onSuccess(res, file, this.uploadFiles);
        this.onChange(file, this.uploadFiles);
      }
    },

项目里面找到node_modules/element-ui/lib/element-ui.common.js
在props里面加一个要父组件传过来的参数bindIndex

onSuccess: {
      type: Function,
      default: noop
    },
    bindIndex: null,
    onProgress: {
      type: Function,
      default: noop
    },

可以在上面handleSuccess这个函数中加入这个参数

this.onSuccess(res, file, this.uploadFiles, this.bindIndex);

现在我们可以在el-upload中传入这个参数了

<ul>
  <li v-for="(item, index) in List" :key="index">
    <el-upload :bindIndex="index" :on-success="handleSuccess"></el-upload>
  </li>
</ul>

现在我们可以来看看handleSuccess(res,)这个回调里面参数会打印出什么

handleLearnDataSuccess (res, file, fileList, index) {
   console.log(res, file, fileList, index)
   let dialog = this.dialog
   dialog.learningSource[index].content = {
     image_path: res.url,
     name: file.name
   }
   dialog.learningSource[index].file.push(file)
 },

这就是我们要拿到的index

image.png

但是这种方法是有弊端的，他实现的原理是修改包文件，但是方法使得其他协同工作的同事也要修改代码，才能正常运行。

2.2解决二：在调用回调时二次封装，把默认的参数和自己新增的参数作为一个新的函数返回

这里的index就是我们v-for出来的index，调用哪个upload，就把相对应的index传进去，上传成功后，我们是不是就可以把文件与index联系起来了呢

:on-success="(res,file)=>{return handleLearnDataSuccess(res,file,index)}"

当然，这里用的是es6写法，可能IE某些版本并不支持这种写法，我们可以转换一下，写成普通函数

:on-success="function (res,file) {return handleLearnDataSuccess(res,file,index)}"

3.总结

解决问题的方法有很多种，但是要找到一个适合我们自己的才是最重要的。简单总结下关于解决element-ui 中upload组件使用多个时无法绑定对应的元素这个问题，我们可以有一下几种方式：

修改源码，在回调中加入索引参数
调用钩子函数时，把自己新增参数与原有参数作为一个新的函数返回