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

问题场景

 

咱们在一个列表中分别都须要有upload组件的时候也就涉及到了多个upload同时存在；

由于通常能够在success回调中拿到上传成功的图片已经成功的response，多个也能够，这个没毛病；

文档以下：

 

 

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

例如这种状况

 

这两个甚至无数个“步骤”，对应的是vue data 里面的某个数组，如：

data(){
    arr:[
　　　　{
　　　　　　图图图

　　　　}，
　　　　{
　　　　　　图
　　　　}
    ]    
}    

假设这个时候咱们点击第一个BOX里面的图片上传，而后拿到对应的对调参数，（response,file,fileList）

说白了，我不知道该把这个fileList给谁处理，是this.arr[0] , 仍是 this.arr[1]。

 

通常项目中处理这种相似问题的时候是把对应的item经过这个函数传过来

如：

:on-success="handleProcedureSuccess(item)"

不过显然不行，若是我传实参了，那么组件内定义的几个参数就过不来了，覆盖了；

而后我就想这，我非得把当前item给传到这个方法里去，否则无法操做。

无奈····，改改改，通过我努力搜寻发现要修改这个文件

在项目里面找到node_modules/element-ui/lib/element-ui.common.js

咱们在props里面加一个要父组件传过来的参数，随便叫啥啦

而后继续往下找到，this.onSuccess的执行地点，加上这个参数

 

好了这里改好了，再到咱们的页面里，写组件的时候多传个参数，我这里传的是数组的索引

 

 OK啦，再而后在success回调的时候就会多出一个参数，就是咱们传进去这个自定义的值啦

由此，用第四个参数去决定你处理的是第几个数组元素。

 

搞定~~~~

=========================华丽的分割线==============================

后面想了想仍是不该该经过这种方式去解决问题，为何呢，由于你要去修改包文件才可以达到

想要的效果，那么就会致使下次部署项目环境的时候也须要改，或者其余同事协同工做的时候还

须要他也去改一下才能正常运行····so，不合理。

后面又想到一个解决方案就是本身对它的upload组件进行二次封装，咱们不动他本身的代码，只

是在调用本身upload组件的时候多传一个参数，而后在执行回调的时候返回回来便可，好了直接

上图：最它作了一个简单的封装

 

======================== 引用网友的解决方案，更方便一些，  ================================

好久没关注博客园了很差意思，看你们都有这样的困扰，直接把网友提供的简单方案贴出来吧

 

我以前的解决办法可能有些绕，有些人没看明白，这里就直接借用评论里的解决方案了，

出现这个问题的核心是多个上传组件没法与 data 一一关联，咱们能够在时间绑定的时候就把因此进行关联

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

 

这里的Index也就是咱们想要自定义的参数了，这个数据与 data 里面的内容相对应，

由于你的上传组件能够根据 data 里面的数组输出，那么对应的数组的索引也能够拿到，

因此在上传成功回调的同时，经过索引参数就能准确判断对应的是哪一块数据了，

但愿对大家有帮助。

 

 

好啦，正确的解决思路引导