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

摘要:
问题场景我们在一个列表中分别都需要有upload组件的时候也就涉及到了多个upload同时存在;因为一般可以在success回调中拿到上传成功的图片已经成功的response,多个也可以,这个没毛病;文档如下:!!!但是,当多个同类型的upload同时存在的时候,我在怎么知道回调里面的fileList该与谁关联呢?

问题场景

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

因为一般可以在success回调中拿到上传成功的图片已经成功的response,多个也可以,这个没毛病;

文档如下:

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

!!!但是,当多个同类型的upload同时存在的时候,我在怎么知道回调里面的fileList该与谁关联呢?

例如这种情况

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

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

data(){
    arr:[
    {
图图
},
{

} ] }

假设这个时候我们点击第一个BOX里面的图片上传,然后拿到对应的对调参数,(response,file,fileList)

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

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

如:

:on-success="handleProcedureSuccess(item)"

不过显然不行,如果我传实参了,那么组件内定义的几个参数就过不来了,覆盖了;

然后我就想这,我非得把当前item给传到这个方法里去,不然没法操作。

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

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

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

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

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

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

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

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

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

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

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

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

搞定~~~~

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

后面想了想还是不应该通过这种方式去解决问题,为什么呢,因为你要去修改包文件才能够达到

想要的效果,那么就会导致下次部署项目环境的时候也需要改,或者其他同事协同工作的时候还

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

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

是在调用自己upload组件的时候多传一个参数,然后在执行回调的时候返回回来即可,好了直接

上图:最它做了一个简单的封装

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

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

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

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

出现这个问题的核心是多个上传组件无法与 data 一一关联,我们可以在时间绑定的时候就把所以进行关联

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

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

因为你的上传组件可以根据 data 里面的数组输出,那么对应的数组的索引也可以拿到,

所以在上传成功回调的同时,通过索引参数就能准确判断对应的是哪一块数据了,

希望对你们有帮助。

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

免责声明:文章转载自《解决element-ui 中upload组件使用多个时无法绑定对应的元素》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇coredumpDelphi源程序格式书写规范下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Java实现打包下载BLOB字段中的文件

概述 web项目的文件打包下载实现;servlet接收请求,spring工具类访问数据库及简化大字段内容获取,org.apache.tools.zip打包。 必要提醒:当前总结是继Java实现下载BLOB字段中的文件之后的总结,如有不解之处,请参考之。 核心代码 jdk提供了java.util.zip包,用于实现文件打包的功能,但是对中文名的文件没有很好的...

el-upload 上传携带参数

1、template: <el-upload   class="upload-file-demo"   action="上传的url"   ref="uploadComp"   :auto-upload="false" //禁止自动上传   :show-file-list='true' //显示上传文件名   :file-list="certific...

WebUploader.js 上传的几种情况

最近的项目中用到webUploader的地方比较多,总结了几种图片上传的情况。 必要的引用 <link href="http://t.zoukankan.com/~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" /> <script src="http://t.z...

android如何实现文件按时间先后顺序排列显示

<span style="font-size:18px;">File[] files =parentFile.listFiles(fileFilter);//通过fileFileter过滤器来获取parentFile路径下的想要类型的子文件   ArrayList<FileInfo> fileList = new ArrayLi...

Java File类方法使用详解

cka  在操作文件之前必须创建一个指向文件的链接或者实例化一个文件对象,也可以指定一个不存在的文件从而创建它。 File对象代表磁盘中实际存在的文件和目录。 Java 中的 File 类是文件和目录路径名的抽象形式。使用 File 类可以获取文件本身的一些信息,例如文件所在的目录、文件长度、文件读写权限等,还可用于文件和目录的创建、文件的查找和文件的删除...

element UI组件库中,Upload组件上传闪动问题

闪动问题复现 在上传之后总是发现有闪动的现象,对其进行深入研究后发现,其闪动原因,是因为使用的file-list并不会自动添加上传了的图片,而需要由我们来人工来添加,而添加则必须使用on-success事件中自带的参数去做赋值操作。 可以看到,图片上传成功后,图片会有一个先向右,然后停顿片刻摆着位置后,返回左侧的现象。 <template>...