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

最新推荐文章于 2024-08-13 00:11:49 发布

weixin_34234823

最新推荐文章于 2024-08-13 00:11:49 发布

阅读量735

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui python ViewUI

原文链接：https://my.oschina.net/baiduapi/blog/1923752

本文介绍了解决Element UI框架中图片上传组件的问题，当上传多张图片时如何获取每张图片对应的索引值。提供了三种解决方案，包括直接修改上传成功回调函数、源码层面增加参数以及对组件进行二次封装。

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