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

elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢?

之前在网上找到了一位大神的方法,修改源码,在回调函数中多加一个参数,但是这种方法在多人开发时不太适用,因为这要求所有人都要修改源码,这里附上大神的方法,大家可以酌情使用

首先在你下个包里面找到node_modules/element-ui/lib/element-ui.common.js

然后在里面的props里多加一个传递的参数,自定义参数名

接着往下找到你需要用到的函数,在参数里加上你新增的这个参数

这样就改好啦,回到项目中,在引用的时候把这个参数传进去,一般是索引,如果是在循环中,就传index

传参之后,在你刚刚改过的回调函数中就能拿到这个值了,这样就能得到循环中的每一个upload组件

 handleProcedureSuccess (res, file, fileList, index) {// 前面三个参数是组件默认的,最后一个参数是我们传进去的
}

这样通过修改源码传参的方法就实现了,大神还提供了另一种方法,就是对组件进行二次封装,不过没太看懂,有兴趣的可以去大神的博客看看,以下是文章地址

https://www.cnblogs.com/AlexBlogs/p/7150532.html

其实还有一种简便的写法,也算是二次封装,不过是直接在调用的时候写

通过这种闭包的写法,把默认的参数和自己新增的参数作为一个新的函数返回,也可以实现功能,这里要注意一下,这里最好不要用箭头函数的写法,因为有些IE不支持es6语法,可能会页面出不来,写成这种普通函数就好了

还有一种需求应该也挺经常用到的,那就是上传按钮的隐藏,官方并没有提供隐藏的方法,虽然有提供限制的方法,但是还是更想达到上传图片张数到上限后就把上传框隐藏,这里分享一种方法,通过CSS控制上传框的隐藏

先在CSS中定义好样式,在组件中通过动态添加类名的方式控制隐藏,这里是结合element-UI table表格一起使用,通过文件列表的length控制

在这里补充一下自己遇到的坑,我的上传组件是放在表格里生成的,表格可以增删,但是我上传图片之后重新生成表格,上传的图片却删除不了,如下图

看了官网提供的方法,clearFiles但是不生效,还有百度的说把fileList清空,但是都不行,最后把组件打印出来,发现上传的图片时存在uploadFiles属性里,只要把uploadFiles置空就可以清除页面上上传的图片了

放一下页面的代码

// 我的upload是放在table组件里的<el-table-columnprop="imageUrl":label="LANMSG.specifications.picture"><template slot-scope="scope"><el-uploadclass="avatar-uploader"　　　　　　　　　　　// ref设置的不一样:ref="getUpload(scope.$index)":class="{disabled: scope.row.imageUrl}":action="uploadPath":on-success="function (res,file){return handleImgSuccess(res,file,scope.$index)}":data="uploadData":limit="1":before-upload="checkFile"list-type="picture-card":on-remove="function (res,file){return handleImgRemove(res,file,scope.$index)}"><!-- <img style="width: 60px; height: 60px;" v-if="scope.row.imageUrl" :src="scope.row.imageUrl" alt="" class="avatar"> --><i class="el-icon-plus avatar-uploader-icon"></i></el-upload></template></el-table-column>// js 代码// 组件是循环的,我给他的ref也是不一样的
getUpload (i) {return `upload${i}`},// 生成规格列表
    addTable () {let upload = 'upload'this.productInfo.skuList.forEach((v, i) => {upload = `upload${i}`console.log(this.$refs[upload])// 把每一项的uploadFiles重置为空if (this.$refs[upload]) {this.$refs[upload].uploadFiles = []}})}},

还有一种情况,就是上传文件失败时,页面上的文件列表不会自动删除,会给用户一种上传成功的错觉.这时可以在success的回调函数中手动删除,前提是一定要记得绑定file-list

这种方法也适用多个上传组件的情况,就是要定义好相应组件的file-list

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/9473644.html

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

Element中Upload上传组件的http-request方法
刚开始接触vue,新框架是vue+Element.其中写到上传组件的时候卡住了.问题详细: Upload上传组件中的action是必选参数,但是调后台接口的时候需要手动加参数和token,比较麻烦. ...
element ui视频上传（已上线，拿去即用）
element ui视频上传 + 进度条实现(拿去即用) 1.template 部分 2. script 部分 3. scss 部分 1.template 部分 <template>< ...
hdfs dfs -put_通过HDFS中的`hdfs dfs -put`命令行上传文件时，如何设置一个文件的复制因子？...
hdfs dfs -put When uploading a file by the hdfs dfs -put command line in HDFS, how to set a replicat ...
element ui图片上传-实现单图上传
1. 业务需求: 需要把多图上传的效果改造成为单图上传的效果 2. 效果展示 (1) 原来官网效果: https://element.eleme.cn/2.0/#/zh-CN/component/up ...
element ui 文件上传限制文件类型
问题描述: 限制文件的上传类型,在change事件或者是成功的回调函数中,做限判断会触发事件冒泡,并且无法删除页面上的展示列表中的文件解决方案: 在用户选择文件的时候就只能选择对应文件的类型实现方 ...
uniapp - 全平台兼容的 “多图上传“ 功能，搭配 uview 组件库中的 upload 上传组件（附带详细的示例源码及注释，可直接复制使用或简单修改）
效果图使用 uniapp 开发,多平台全端兼容的多图上传功能,支持限制个数及移除等. 组件库使用的是 uview 框架,上传组件基于 Upload组件,功能完美无bug. 准备阶段 Upload组件 ...
我是如何设计 Upload 上传组件的
Upload 组件设计的目标是解决用户上传文件的便利性,但是中后台 Upload 组件的场景是多种多样的,所以可扩展能力是 Upload 组件不可忽视的另一方面. 同样为了大家能够更加容易的理解,我会 ...
前端学习（2011）vue之电商管理系统电商系统之初步使用upload上传组件
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
layui upload上传文件时动态设置headers参数值
项目中上传文件时,需在headers中带上token,但是由于一进入页面就已经upload.render,此时如果用户没有登录,token为null,上传失败. 而且由于用户在当前页面弹框登录后,页面 ...

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

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

最新文章

热门文章