elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢?
image.png
解决方案1 修改源码（看到一位大神推荐的）
1、找到node_modules/element-ui/lib/element-ui.common.js文件
image.png
2、在里面的props里多加一个传递的参数,自定义参数名
onPreview: {
type: Function
},
/*这个是新加的 start*/
objectBind:null,
/*这个是新加的 end*/
onSuccess: {
type: Function,
default: noop
},
3、接着往下找到你需要用到的函数,在参数里加上你新增的这个参数this.objectBind
image.png
4、回到项目中,在引用的时候把这个参数传进去,一般是索引，利用索引去匹配
image.png
解决方案2 自己进行二次封装
- 利用闭包的写法,把默认的参数和自己新增的参数作为一个新的函数返回，拿到索引值，进行相关逻辑处理
:on-success="function (res,file){return handleImgSuccess(res,file,scope.$index)}"
image.png
