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组件使用多个时无法绑定对应的元素这个问题，我们可以有一下几种方式：
- 修改源码，在回调中加入索引参数
- 调用钩子函数时，把自己新增参数与原有参数作为一个新的函数返回
