element-ui中upload组件多个无法获取对应的值

2019独角兽企业重金招聘Python工程师标准>>>

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-success="(res,file)=>{return sucss(res,file, index)}"
  :on-error="(res,file)=>{return error(res,file, index)}">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

饿了么UI图片上传：

upload组件使用多个时无法获取对应的值
首先列表中的数据都是动态获取的，所以要更改任一张图片就要得到这张图片的索引值index，在el-upload 组件中的:on-success="sucss"和 :on-change=""等这些方法中没有能传参的方式，所以只能在执行这些方法之前添加需要的参数了，方法如下：

方法一

把:on-success="sucss" 改成:on-success="(res,file)=>{return sucss(res,file, index)}""方可获取每条数据的索引index

方法二

找到 node_modules/element-ui/lib/element-ui.common.js（添加）修改props参数 objectIndex，然后继续往下找到，this.onSuccess的执行地点，加上这个参数    this.onSuccess(res, file, this.uploadFiles,this.objectIndex);
调用on-success="success"    1,success(response, file, fileList, objectIndex)或者success(response, file, fileList){[].slice.call(arguments)//获取对应索引值objectIndex的值}

方法三

可以对饿了么组件再次封装
http://www.hovis.cn/web/bj/2018-02-01/62.shtml

转载于:https://my.oschina.net/baiduapi/blog/1923752