页面中使用多个element-ui upload上传组件时绑定对应元素

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

• 相关文章https://www.cnblogs.com/AlexBlogs/p/7150532.html

解决方案2 自己进行二次封装

• 利用闭包的写法,把默认的参数和自己新增的参数作为一个新的函数返回，拿到索引值，进行相关逻辑处理

 :on-success="function (res,file){return handleImgSuccess(res,file,scope.$index)}"

image.png