elementUI——upload限制图片或者文件只能上传一个——公开版

最近在写后台管理系统时,遇到一个需求,就是上传图片,有且仅能上传一张。

效果图如下:
在这里插入图片描述
在这里插入图片描述
功能描述:上传图片时,仅支持单选,如果上传图片成功后,展示图片,并隐藏添加图片的按钮。删除图片后,上传按钮展示。

html部分代码

 <el-upload action="/file/Upload?module=EQ" accept="image/jpeg,image/jpg,image/png" :limit="1" :on-change="handleLimit" :class="{disabled:eqObj.uploadDisabled}" list-type="picture-card" :on-success="handleSuccess" :on-remove="handleRemove"><i class="el-icon-plus"></i>
</el-upload>
1.action:上传图片的地址,也可以使用`http-request`方法覆盖原有支持的上传函数2.accept:上传图片支持的格式,如果是上传文件,也可以写文件的格式,用于选择图片或者文件时的筛选3.limit:显示文件上传的个数,这个个数仅限制本次上传的个数,而非总数,因此还需要根据on-change函数进行判断4.on-change:监听on-change(文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用)函数,来判断已经上传的数目5.list-type:文件列表的类型,有text/picture/picture-card三种类型6.on-success:文件上传成功后的回调函数,上传成功后可以拿到对应图片的线上地址,用于赋值给对应的参数7.on-remove:删除文件,如果删除文件后的回调函数

css部分代码

.disabled .el-upload.el-upload--picture-card {display: none !important;
}.disabled .el-button--success.is-plain {display: none !important;
}

如果添加了disabled的类名,则可以将添加图片的样式进行隐藏,就可以实现仅能上传特定数目了

js部分代码

限制文件个数,可以通过监听on-change事件来处理:

 handleLimit(file, fileList) {if (fileList.length >= 1) {this.eqObj.uploadDisabled = true;this.$set(this.eqObj, 'uploadDisabled', true);} else {this.eqObj.uploadDisabled = false;this.$set(this.eqObj, 'uploadDisabled', false);}this.$forceUpdate();
},

图片上传成功后的回调:

handleSuccess(response, file, fileList) {if (response.success) {this.eqForm.image = response.filepath;}
},

删除图片后的回调:

handleRemove(file, fileList) {console.log(file, fileList);this.eqObj.uploadDisabled = false;this.$forceUpdate();
},

注意:如果通过this.$set无法将对象的参数改变,则可以使用this.$forceUpdate()的方式来处理

按钮样式的上传功能:

在这里插入图片描述

html部分代码

<el-upload class="upload-demo" style="margin-top:4px;display:inline-block;" :show-file-list="false"action="/file/Upload?module=NoMainPackagePic" :file-list="[]"multiple:on-success="onSuccess"><el-button size="mini" type="success" plain>上传图片</el-button>
</el-upload>

完成!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/497062.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【RabbitMQ高级篇】消息可靠性问题(1)

目录 1.消息可靠性 1.1.生产者消息确认 1.1.1.修改配置 1.1.2.定义Return回调 1.1.3.定义ConfirmCallback 1.2.消息持久化 1.2.1.交换机持久化 1.2.2.队列持久化 1.2.3.消息持久化 1.3.消费者消息确认 1.3.1.演示none模式 1.3.2.演示auto模式 1.4.消费失败重试机制…

MyBatis知识点笔记

目录 mybatis mapper-locations的作用&#xff1f; mybatis configuration log-impl 作用&#xff1f; resultType和resultMap的区别&#xff1f; 参数 useGeneratedKeys &#xff0c;keyColumn&#xff0c;keyProperty作用和用法 取值方式#和$区别 动态标签有哪些 MyBat…

Vue3 使用OCR识别图片文字

Tesseract.js 是一个javascript库&#xff0c;可以从图像中获取几乎任何语言的单词&#xff0c;支持文本转pdf功能&#xff0c;精准度很高。 1. 安装 npm install tesseract.js 2. 示例代码&#xff08;vue3版&#xff09; <template><div class"container&qu…

【多维DP】力扣3366. 最小数组和

给你一个整数数组 nums 和三个整数 k、op1 和 op2。 你可以对 nums 执行以下操作&#xff1a; 操作 1&#xff1a;选择一个下标 i&#xff0c;将 nums[i] 除以 2&#xff0c;并 向上取整 到最接近的整数。你最多可以执行此操作 op1 次&#xff0c;并且每个下标最多只能执行一…

python+PyMuPDF库:(一)创建pdf文件及内容读取和写入

目录 文档操作 打开文档 获取文档信息 删除页 复制页 移动页 选择重构合并 保存关闭 页对象操作 内容读取 获取页对象的字体样式 插入文本标签 插入文本内容 字体设置 insert_text添加文本 insert_textbox添加文本 插入图片 获取页面注释、链接、表单字段 …

python学opencv|读取图像(二十一)使用cv2.circle()绘制圆形进阶

【1】引言 前序已经掌握了使用cv2.circle()绘制圆形的基本操作&#xff0c;相关链接为&#xff1a; python学opencv|读取图像&#xff08;二十&#xff09;使用cv2.circle()绘制圆形-CSDN博客 由于圆形本身绘制起来比较简单&#xff0c;因此可以自由操作的空间也就大&#x…

音视频入门基础:MPEG2-PS专题(2)——使用FFmpeg命令生成ps文件

通过FFmpeg命令可以将mp4文件转换为ps文件。由于ps文件对应的FFInputFormat结构为&#xff1a; const FFInputFormat ff_mpegps_demuxer {.p.name "mpeg",.p.long_name NULL_IF_CONFIG_SMALL("MPEG-PS (MPEG-2 Program Stream)"),.p.flags …

xshell基础设置

一.查看->勾选会话管理器和快速命令栏 二.工具->选项->终端 三.工具->选项->高级 四.文件->默认会话属性->外观&#xff08;看个人喜好&#xff09;

【GlobalMapper精品教程】091:根据指定字段融合图斑(字段值相同融合到一起)

文章目录 一、加载数据二、符号化三、融合图斑1. 根据图斑位置进行融合2. 根据指定字段四、注意事项一、加载数据 订阅专栏后,从私信中查收配套实验数据包,找到data091.rar,解压并加载,如下图所示: 属性表如下: 二、符号化 为了便于比对不同的融合结果,查看属性表根据…

大语言模型(LLM)中大数据的压缩存储及其重要性

在大型语言模型&#xff08;LLM&#xff09;中&#xff0c;KV Cache&#xff08;键值缓存&#xff09;的压缩方法及其重要性。 为什么要压缩KV Cache&#xff1f; 计算效率&#xff1a;在生成文本的过程中&#xff0c;每个生成的token都需要与之前所有的token的键值&#xff…

Springboot关于格式化记录

日期格式化 返回前端日期需要格式化 <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.2</version> </dependency>JsonFormat(pattern "yyyy-MM-dd…

条款19 对共享资源使用std::shared_ptr

目录 一、std::shared_ptr 二、std::shared_ptr性能问题 三、control block的生成时机 四、std::shared_ptr可能存在的问题 五、使用this指针作为std::shared_ptr构造函数实参 六、std::shared_ptr不支持数组 一、std::shared_ptr<T> shared_ptr的内存模型如下图&…

Linux第99步_Linux之点亮LCD

主要学习如何在Linux开发板点亮屏&#xff0c;以及modetest命令的实现。 很多人踩坑&#xff0c;我也是一样。关键是踩坑后还是实现不了&#xff0c;这样的人确实很多&#xff0c;从群里可以知道。也许其他人没有遇到这个问题&#xff0c;我想是他运气好。 1、修改设备树 1)、…

攻破 kioprix level 4 靶机

又又又来了... 法一、 基本步骤 1.确认主机ip&#xff0c;扫描端口确定服务和版本 2.访问网站&#xff0c;扫描目录&#xff0c;查找敏感信息 3.利用敏感信息和SQL注入进入网站 4.ssh服务连接主机 5.shell逃逸并查找敏感信息&#xff08;与数据库等相关&#xff09; 6.m…

Qt自定义步骤引导按钮

1. 步骤引导按钮 实际在开发项目过程中&#xff0c;由一些流程比较繁琐&#xff0c;为了给客户更好的交互体验&#xff0c;往往需要使用step1->step2这种引导对话框或者引导按钮来引导用户一步步进行设置&#xff1b;话不多说&#xff0c;先上效果 2. 实现原理 实现起来…

解决nuxt3下载慢下载报错问题

在下载nuxt3时总是下不下来&#xff0c;最后还报错了。即使改成国内镜像源也不行。 解决方法&#xff1a; 直接去github上下载 https://github.com/nuxt/starter/tree/v3 解压后得到如下目录&#xff1a; 手动修改项目名和文件夹名 安装依赖 npm install可能会比较慢或下不…

ShenNiusModularity项目源码学习(6:访问控制)

ShenNius.Admin.API项目中的控制器类的函数如果需要访问控制&#xff0c;主要是调用ShenNius.Infrastructure项目下的AuthorityAttribute特性类实现的。AuthorityAttribute继承自ActionFilterAttribute抽象类&#xff0c;后者用于在调用控制器操作函数前后自定义处理逻辑&#…

【连续学习之SSL算法】2018年论文Selfless sequential learning

1 介绍 年份&#xff1a;2018 期刊&#xff1a; arXiv preprint Aljundi R, Rohrbach M, Tuytelaars T. Selfless sequential learning[J]. arXiv preprint arXiv:1806.05421, 2018. 本文提出了一种名为SLNID&#xff08;Sparse coding through Local Neural Inhibition and…

《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》学习笔记——HarmonyOS技术理念

1.2 技术理念 在万物智联时代重要机遇期&#xff0c;HarmonyOS结合移动生态发展的趋势&#xff0c;提出了三大技术理念&#xff08;如下图3-1所示&#xff09;&#xff1a;一次开发&#xff0c;多端部署&#xff1b;可分可合&#xff0c;自由流转&#xff1b;统一生态&#xf…

基于springboot校园招聘系统源码和论文

可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C、python、数据可视化、大数据、文案 使用旧方法对校园招聘系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在校园招聘系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比…