el-upload上传图片，限制上传数量，超过最大数量则不展示上传组件，可点击删除

1.html中布局

<el-uploadmultiple:limit="6"accept="image/png"action="#"list-type="picture-card":http-request="uploadDetailImg":on-remove="handleRemove":file-list="fileList":on-change="handleEditChange":class="{ hide: hideUploadBtn }"><!-- limit：最大上传数量 --><!-- accept：限制上传格式，不满足格式的文件被置灰 --><!-- action：上传地址 接口写在js中要用#  必选参数 --><!-- list-type：文件上传的类型 此处为 照片墙 --><!-- http-request：自定义上传 --><!-- on-remove：移除图片 --><!-- file-list：上传的文件列表 --><!-- on-change：文件状态改变时的钩子 --><!-- :class="{ hide: hideUploadBtn }": 控制上传组件是否显示 data中默认 hideUploadBtn: false --><div slot="fileList" slot-scope="{ file }"><!-- 上传后的图片展示 --><imgclass="el-upload-list__item-thumbnail":src="file.url"alt=""width="300px;height:300px"/><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-delete"@click="handleRemove"><!-- 删除图标 --><i class="el-icon-delete"></i></span></span></div><i class="el-icon-plus"></i></el-upload>

2.js中相应方法

//  自定义方法 上传图片 限制6张uploadDetailImg(file) {//file为点击上传时返回的文件内容let formData = new FormData();// 定义传递参数第一个值为参数名 第二个为值formData.append("appMiniFile", file.file);formData.append("type", "02");formData.append("token", this.token);// 调用上传图片的接口uploadPicture(formData).then((res) => {// 成功时拿到res中的url 赋值res.value = res.url;// 图片必传校验this.$set(this.form, "detailImg", res.url);// 上传后去掉必传提示this.$refs["form"].validateField("detailImg");// 将接口返回的数据res push到展示图片的fileList中this.fileList.push(res);});},// 移除图片操作handleRemove(file, fileList) {// fileList为移除后剩余的图片数组 赋值给this.fileList 则展示正确this.fileList = fileList;// 上传图片 > 6 则隐藏上传组件this.hideUploadBtn = fileList.length >= 6;},// 最多上传6张图，超过时隐藏上传按钮handleEditChange(file, fileList) {this.hideUploadBtn = fileList.length >= 6;},

3.css中控制是否显示上传控件

// 隐藏上传组件
.hide {.el-upload--picture-card {display: none !important;}
}

4.实现效果

以上实现了限制数量的图片上传以及移除操作，若有不正确还望大神指点！

el-upload上传图片，限制上传数量，超过最大数量则不展示上传组件，可点击删除相关推荐

使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...
多人上传文件公共网盘_解决百度网盘上传提示“上传文件数量超过500个限制”的方法...
不知道大家有没有使用过百度网盘这款软件,在这款软件中我们可以免费获取很多的存储空间.小编经常会使用这款软件来保存电影等资源,因此每一个电影都会使用一个文件夹进行保存.最近突然发现在百度网盘中只能上传5 ...
el upload ajax,Upload 上传 el-upload 上传配置请求头为Content-Type: multipart/form-data
api接口处添加属性 (标红处) // 校验台账 export const checkEquiment = (data) => { return axios({ url: '/job/equip ...
php 上传图片预览多张,uploadify插件实现多个图片上传并预览
使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...
多个ajaxFileUpload上传图片与ajax合用，解决同步问题，用户随意上传多少图片都可以；
需求描述:因ajaxFileUpload 文件上传插件是异步请求,但是业务上需要先得到 ajaxFileUpload 请求后的图片url, 在通过ajax 把图片URL等其它需要录入的数据一并写入数据 ...
MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片...
本篇通过在配置文件中设置,对上传图片修剪后保存到指定文件夹. 相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 MVC文件上传02-使用HttpPostedFileB ...
gitee上传大小超过100M文件
文章目录安装LFS 开启LFS功能选择文件类型配置远程仓库上传大文件报LFS错今天上传项目文件到gitee上面,出现错误 remote: error: File: f422c55c723a ...
asp.net怎么写上传图片到mysql的页面_【web安全】文件上传漏洞
文件上传漏洞● 0x00 什么是文件上传漏洞文件上传漏洞是指用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力.利用上传漏洞可以直接得到WEBSHELL,危害等级超级高.上 ...
wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传
wangEditor是一款优秀的国产编辑器. 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 但是自身带的图片上传在上传七牛云可能存在版本问题.还有如果是其他云的JS上传 ...

el-upload上传图片，限制上传数量，超过最大数量则不展示上传组件，可点击删除

el-upload上传图片，限制上传数量，超过最大数量则不展示上传组件，可点击删除相关推荐

最新文章

热门文章