样式

<el-upload

action="file_upload" //上传地址

:http-request="uploadFile" //上传接口函数

list-type="picture-card" //方块卡片形式

:limit="1" //最大限制上传数量

:class="{ hide: hideUploadBtn }" //超过上传数量，上传按钮隐藏

:file-list="baseForm.attach_list" //文件数组

:before-upload="beforeAvatarUpload" //上传前函数：比如上传类型、大小判断

:on-preview="handlePictureCardPreview" //点击放大图片

:on-change="handleEditChange" //图片变化时：可控制上传按钮不显示

:on-remove="handleRemove" //删除图片时：可控制上传按钮不显示

accept="."> //可接受的上传样式

<img v-if="imageUrl" :src="data:imageUrl" class="avatar"> 上传按钮显示的图片

<i v-else class="el-icon-plus avatar-uploader-icon"></i> 上传按钮显示+形状

</el-upload>

对应js：

/*-----------------------------上传相关-----------------------------*/

//点击图片放大图片

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url;

this.dialogVisible = true;

// 移除图片操作,控制上传按钮不显示

handleRemove(file, fileList) {

// // fileList为移除后剩余的图片数组赋值给this.fileList 则展示正确

// this.baseForm.attach_list = fileList;

// 上传图片 > n 则隐藏上传组件

this.hideUploadBtn = fileList.length >= 1;

// 最多上传n张图，超过时隐藏上传按钮

handleEditChange(file, fileList) {

this.hideUploadBtn = fileList.length >= 1;

css样式

//超过上传限制时，上传按钮不显示。

.hide {

/deep/.el-upload--picture-card {

display: none !important;

}

//去掉过渡动画，不然删除操作的时候，布局会闪一下。

/deep/ .el-upload-list__item {

transition: none !important

}

多个upload并排显示

el-upload提取出公共组件，然后想多个upload并排显示，

如果多个upload外面没有div包裹，需要每个upload都设置display：inline
多个upload外有div包裹，外层div设置dispaly：flex

elementUI el-upload使用方法、上传限制数量且超出不显示上传按钮、删除闪一下、多个upload并排显示相关推荐

element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
小程序体验版跟测试版上传照片失败的问题及图片上传的方法
小程序写了一个星期,马上要交付给客户,真机测试都没有问题后,提交体验版之后发现图片上传不上去,然后我就在网上找资料,总结以下几个原因: 1.先看服务器域名是否配置,uploadFile 2. 真机调 ...
vue+elementui 同时有上传文件和批量上传文件功能，上传文件或批量上传文件后必须刷新才能再次上传文件
报错描述: 使用element-ui的上传文件组件写一个批量上传和上传文件,但是发现每次上传文件后或者批量上传文件后,不能再次上传文件或者批量上传文件.只有进入页面第一次点击上传文件或者批量上传文件才 ...
xshell怎么往linux系统上传文件,xshell怎么连接linux xshell上传文件的方法
匿名用户 1级 2016-04-29 回答 1.保证linux下ssh开启(默认开启) # netstat -tupln |grep ssh tcp 0 0 0.0.0.0:22 0.0.0.0:* ...
无线水标数值如何上传服务器,一种精准上传数据的智能水表及用水量记录上传方法...
1.一种精准上传数据的智能水表,包括计数上传模组电路板(1).齿轮组件(2).计数组件(3).叶轮组件(4):所述叶轮组件(4)位于水表内部的流道内,叶轮组件(4)向上连接驱动齿轮系组件(2),齿轮系 ...
多人上传文件公共网盘_解决百度网盘上传提示“上传文件数量超过500个限制”的方法...
不知道大家有没有使用过百度网盘这款软件,在这款软件中我们可以免费获取很多的存储空间.小编经常会使用这款软件来保存电影等资源,因此每一个电影都会使用一个文件夹进行保存.最近突然发现在百度网盘中只能上传5 ...
upload组件多个文件上传、自定义文件列表显示及手动上传
1.多个上传和上传单个 1)由 multiple属性来控制 2)保存state时,注意存的List内容即可 //参数 uploadProps={name:'file', //接口入参名accept: ...
把计算机信息传到电视屏的方法,如何将电脑内容投屏到电视上？当贝市场完整版教程...
如何将电脑内容投屏到电视上?当贝市场完整版教程 2019年08月27日 12:50作者:黄页编辑:黄页分享很多朋友都试过将手机内容投屏到电视上,但鲜少有用户知道电脑上的内容如何投屏到电视上.今天当 ...
formdata上传文件_大文件分片断点上传实现思路以及方案
作者:yeyan1996| 来源:掘金https://juejin.im/post/5dff8a26e51d4558105420ed 前言我在面试的时候确实被问到了这个问题,而且是一道在线 codi ...
js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...

elementUI el-upload使用方法、上传限制数量且超出不显示上传按钮、删除闪一下、多个upload并排显示

样式

对应js：

css样式

多个upload并排显示

elementUI el-upload使用方法、上传限制数量且超出不显示上传按钮、删除闪一下、多个upload并排显示相关推荐

最新文章

热门文章