当前位置：首页 > news >正文

element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮

news 来源：原创 2025/6/10 6:50:08

最近在重构项目，使用了 element plus UI框架，有个功能是实现图片上传，且限制只能上传一张图片，结果，发现，可以限制只上传一张图片，但是上传按钮还在，如图：

解决办法：当上传个数达到限定个数时，通过样式控制上传按钮的隐藏
主要代码：

:class="{ 'hideUploadBtn': fileList.length >= count }"

:deep(.hideUploadBtn .el-upload--picture-card) {

display: none;

}

详细代码如下：

<template><div><el-uploadlist-type="picture-card":show-file-list="true":before-upload="beforeUpload":multiple="count === 1 ? false : true":file-list="fileList":class="{ 'hideUploadBtn': fileList.length >= count }"><el-icon><Plus /></el-icon></el-upload></div>
</template><script setup>
const fileList = ref([]); // 文件列表
const count = ref(1); // 限定只能上传一张const beforeUpload = async (file) => {uploadFunc()return false; // 阻止默认上传
};// 你的上传方法
function uploadFunc() {// 在这里调用后台接口上传
}
</script>
<style lang="scss" scoped>
:deep(.hideUploadBtn .el-upload--picture-card) {display: none;
}
</style>

实现结果如图：

鼠标放到图片上的样子：

element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮

最近在重构项目，使用了 element plus UI框架，有个功能是实现图片上传，且限制只能上传一张图片，结果，发现，可以限制只上传一张图片，但是上传按钮还在，如图： 解决办法&…...

编程日记 2025/6/3 16:49:07

java进行pdf文件压缩

文章目录 pdf文件压缩 pdf文件压缩添加依赖 <dependency><groupId>com.luhuiguo</groupId><artifactId>aspose-pdf</artifactId><version>23.1</version> </dependency>public class OptimizePdf {public static void opti…...

编程日记 2025/6/4 6:34:56

初识算法和数据结构P1：保姆级图文详解

文章目录前言1、算法例子1.1、查字典（二分查找算法）1.2、整理扑克（插入排序算法）1.3、货币找零（贪心算法） 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...

编程日记 2025/6/1 17:54:39

内网服务器添加共享文件夹功能并设置端口映射

参考网址 https://blog.csdn.net/Think88666/article/details/118438465 1.服务器安装smb服务，由于网路安全不允许使用默认端口（445，446），于是修改端口为62445、62446。 2.每台需要共享的电脑都要修改端口映射&#x…...

编程日记 2025/6/2 6:32:46

ruoyi-cloud docker启动微服务无法连接nacos，Client not connected, current status:STARTING

ruoyi-cloud docker启动微服务无法连接nacos，Client not connected, current status:STARTING 场景当使用sh deploy.sh base来安装mysql、redis、nacos环境后，紧接着使用sh deploy.sh modules安装微服务模块，会发现微服务无法连接nacos的情…...

编程日记 2025/6/3 22:58:58

Python----Python高级（函数基础，形参和实参，参数传递，全局变量和局部变量，匿名函数，递归函数，eval()函数，LEGB规则）

一、函数基础 1.1、函数的用法和底层分析函数是可重用的程序代码块。函数的作用，不仅可以实现代码的复用，更能实现代码的一致性。一致性指的是，只要修改函数的代码，则所有调用该函数的地方都能得到体现。在编写函数时&#xf…...

编程日记 2025/6/4 6:34:09

excel 整理表格，分割一列变成多列数据

数据准备对于很多系统页面的数据是没有办法下载的。这里用表格数据来举例。随便做数据的准备。想要看excel部分的可以把这里跳过，从数据准备完成开始看。需要一点前端基础知识，但不多（不会也行）。把鼠标放在你想要拿到本地的…...

编程日记 2025/6/3 21:43:01

Oracle 分区索引简介

目录一. 什么是分区索引二. 分区索引的种类2.1 局部分区索引（Local Partitioned Index）2.2 全局分区索引（Global Partitioned Index） 三. 分区索引的创建四. 分区索引查看4.1 USER_IND_COLUMNS 表4.2 USER_INDEXES 表五. 分区索…...

编程日记 2025/6/4 6:33:53

C++实现设计模式--- 观察者模式 (Observer)

观察者模式 (Observer) 观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，使得当一个对象的状态发生改变时，其依赖者（观察者）会收到通知并自动更新。意图定义对象之间的一对多依赖关系。当一个对象状…...

编程日记 2025/6/4 6:34:24

CentOS 6.8 安装 Nginx

个人博客地址：CentOS 6.8 安装 Nginx | 一张假钞的真实世界提前安装： # sudo yum install yum-utils 一般情况下这个工具系统已经安装。创建文件/etc/yum.repos.d/nginx.repo，输入内容如下： [nginx-stable] namenginx stab…...

编程日记 2025/6/3 0:22:31

px、em 和 rem 的区别：深入理解 CSS 中的单位

文章目录前言一、px - 像素 (Pixel)二、em - 相对父元素字体大小 (Ems)三、rem - 相对于根元素字体大小 (Root Ems)四、综合比较结语前言在CSS中，px、em和rem是三种用于定义尺寸（如宽度、高度、边距、填充等）的长度单位。它们各自有不同的…...

编程日记 2025/6/3 21:32:11

vue 表格内点编辑，单元格不切换成输入框问题分析

vue 表格渲染时，我点击编辑时，想直接在单元格上面进行编辑。效果如下，正常是文本效果，点击编辑时，出现输入框其实实现起来，逻辑很简单，但是中间我却出现了一个问题，效果始终出不…...

编程日记 2025/6/3 10:23:06

MATLAB学习笔记-table

1.在table中叠加table table 的每一列具有固定的数据类型。如果要让表的所有单元格都可以任意填充，就得让每一列都是 cell 类型，这样表中每个单元格都是“一个元胞”。创建时可以先构造一个空 cell 数组（大小为行数列数）&#x…...

编程日记 2025/6/4 16:26:57

使用 selenium-webdriver 开发 Web 自动 UI 测试程序

优缺点优点有时候有可能一个改动导致其他的地方的功能失去效果，这样使用 Web 自动 UI 测试程序可以快速的检查并定位问题，节省大量的人工验证时间缺点增加了维护成本，如果功能更新过快或者技术更新过快，维护成本也会随之提高…...

编程日记 2025/6/3 21:34:33

ffmpeg硬件编码

使用FFmpeg进行硬件编码可以显著提高视频编码的性能，尤其是在处理高分辨率视频时。硬件编码利用GPU或其他专用硬件（如Intel QSV、NVIDIA NVENC、AMD AMF等）来加速编码过程。以下是使用FFmpeg进行硬件编码的详细说明和示例代码。 1. 硬件编码支…...

编程日记 2025/6/3 21:32:46

脚本化挂在物理盘、nfs、yum、pg数据库、nginx（已上传脚本）

文章目录前言一、什么是脚本化安装二、使用步骤1.物理磁盘脚本挂载（离线）2.yum脚本化安装（离线）3.nfs脚本化安装（离线）4.pg数据库脚本化安装（离线）5.nginx脚本化安装（离…...

编程日记 2025/6/3 21:33:21

// Error: line 1: XGen: Candidate guides have not been associated!

Maya xgen 报错// Error: line 1: XGen: Candidate guides have not been associated! 复制下面粘贴到Maya脚本管理器python运行： import maya.cmds as cmds def connect_xgen_guides():guide_nodes cmds.ls(typexgmMakeGuide)for node in guide_nodes:downstream…...

编程日记 2025/6/3 21:34:16

投机解码论文阅读：Falcon

题目：Falcon: Faster and Parallel Inference of Large Language Models through Enhanced Semi-Autoregressive Drafting and Custom-Designed Decoding Tree 地址：https://arxiv.org/pdf/2412.12639 一看它的架构图，可以发现它是基于EAGLE…...

编程日记 2025/6/3 21:33:03

OpenCV实现基于交叉双边滤波的红外可见光融合算法

1 算法原理 CBF是*Cross Bilateral Filter(交叉双边滤波)*的缩写，论文《IMAGE FUSION BASED ON PIXEL SIGNIFICANCE USING CROSS BILATERAL FILTER》。论文中，作者使用交叉双边滤波算法对原始图像 A A A， B B B 进行处理得到细节&#xff0…...

编程日记 2025/6/3 21:33:41

Springboot整合WebService

1.1 概述 webservice 即 web 服务，因互联网而产生，通过 webservice 这种 web 服务，我们可以实现互联网应用之间的资源共享，比如我们想知道手机号码归属地，列车时刻表，天气预报，省市区邮…...

编程日记 2025/6/3 8:19:28

504 Gateway Timeout：网关超时解决方法

一、什么是 504Gateway Timeout？ 1. 错误定义 504 Gateway Timeout 是 HTTP 状态码的一种，表示网关或代理服务器在等待上游服务器响应时超时。通俗来说，这是服务器之间“对话失败”导致的。 2. 常见触发场景 Nginx 超时：反向代…...

编程日记 2025/6/1 7:57:15

C++ 的 pair 和 tuple

1 std::pair 1.1 C 98 的 std::pair 1.1.1 std::pair 的构造 C 的二元组 std::pair<> 在 C 98 标准中就存在了，其定义如下： template<class T1, class T2> struct pair;std::pair<> 是个类模板，它有两个成员&#x…...

编程日记 2025/6/4 10:39:19

抢十八游戏

前言我国民国一直流传着一个名叫“抢十八”的抢数游戏：参与游戏的两人从1开始轮流报数，每次至少报1个数，最多报2个数，每人报的每个数不得与自已报过的或对方报过的重复，也不得跳过任何一个数。谁先报到18&#xff0c…...

编程日记 2025/6/2 20:15:01

从玩具到工业控制--51单片机的跨界传奇【2】

咱们在上一篇博客里面讲解了什么是单片机《单片机入门》，让大家对单片机有了初步的了解。我们今天继续讲解一些有关单片机的知识，顺便也讲解一下我们单片机用到的C语言知识。如果你对C语言还不太了解的话，可以看看博主的C语言专栏哟&#xff…...

编程日记 2025/6/2 20:15:34

LLM实现视频切片合成前沿知识调研

1.相关产品产品链接腾讯智影https://zenvideo.qq.com/可灵https://klingai.kuaishou.com/即梦https://jimeng.jianying.com/ai-tool/home/Runwayhttps://aitools.dedao.cn/ai/runwayml-com/Descripthttps://www.descript.com/?utm_sourceai-bot.cn/Opus Cliphttps://www.opu…...

编程日记 2025/5/29 16:56:54

学习threejs，使用FlyControls相机控制器

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.FlyControls 相机控制…...

编程日记 2025/6/4 17:22:16

wordpress 房产网站筛选功能

自定义分类法创建 add_action( init, ashu_post_type ); function ashu_post_type() {register_taxonomy(province,post,array(label => 省,rewrite => array( slug => province ),hierarchical => true));register_taxonomy(city,post,array(label => 市,rewr…...

编程日记 2025/6/2 20:15:17

SQL面试题2：留存率问题

引言场景介绍： 在互联网产品运营中，用户注册量和留存率是衡量产品吸引力和用户粘性的关键指标，直接影响产品的可持续发展和商业价值。通过分析这些数据，企业可以了解用户行为，优化产品策略，提升用户体验…...

编程日记 2025/5/26 14:41:15

Redis是单线程还是多线程？

大家好，我是锋哥。今天分享关于【Redis是单线程还是多线程？】面试题。希望对大家有帮助； Redis是单线程还是多线程？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Redis是单线程的。尽管Redis的处理是单线程的&a…...

编程日记 2025/6/1 22:30:23

mysql 变量,流程控制与游标

第16章_变量,流程控制与游标 1.变量分为系统变量和用户自定义变量 1.1系统变量 1.1.1系统变量分类系统变量分为全局系统变量以及会话系统变量查看所有全局变量 SHOW GLOBAL VARIABLES 查看所有会话变量 SHOW SESSION VARIABLESor SHOW VARIABLES #默认是会话变量 …...

编程日记 2025/6/3 0:09:02

Java配置log4j日志打印

1. 引入依赖 <dependencies><dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-api</artifactId><version>1.2.14</version> </…...

编程日记 2025/6/3 0:08:45

什么是SQL？

什么是SQL？ SQL（Structured Query Language，结构化查询语言）是一种用于与关系型数据库进行交互的标准编程语言。SQL 是设计用于管理和操作关系型数据库的语言，主要用于查询、插入、更新、删除和定义数据结构。SQL 是关…...

编程日记 2025/6/3 0:09:36

Linux 机器学习

Linux 机器学习是指在 Linux 操作系统环境下进行机器学习相关的开发、训练和应用。具体步骤环境搭建： 选择合适的 Linux 发行版：如 Ubuntu、Fedora、Arch Linux 等。Ubuntu 因其易用性和丰富的软件包管理系统，适合初学者；Fed…...

编程日记 2025/6/3 5:38:05

HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载，Scroll滚动到顶部

HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载效果展示使用方法 import LoadingText from "../components/LoadingText" import PageToRefresh from "../components/PageToRefresh" import FooterBar from "../components/…...

编程日记 2025/6/4 11:21:16

第27章汇编语言--- 设备驱动开发基础

汇编语言是低级编程语言的一种，它与特定的计算机架构紧密相关。在设备驱动开发中，汇编语言有时用于编写性能关键的部分或直接操作硬件，因为它是接近机器语言的代码，可以提供对硬件寄存器和指令集的直接访问。要展开源代码详细叙…...

编程日记 2025/6/3 0:09:19

sosadmin相关命令

sosadmin命令以下是本人翻译的官方文档，如有不对，还请指出，引用请标明出处。原本有个对应表可以跳转的，但是CSDN的这个[](#)跳转好像不太一样，必须得用html标签，就懒得改了。 sosadmin help 用法 sosadm…...

编程日记 2025/6/2 6:32:46

【git】-初始git

学习资源推荐- 标签管理 - Git教程 - 廖雪峰的官方网站一、什么是版本控制？ 二、Git的安装三、掌握Linux常用命令四、Git基本操作 1、提交代码 2、查看历史提交 3、版本回退一、什么是版本控制？ 版本控制是一种用于记录文件或项目内容变化的系…...

编程日记 2025/6/2 0:49:32

JAVA之单例模式

单例模式（Singleton Pattern）是一种设计模式，用于确保一个类只有一个实例，并提供一个全局访问点来获取该实例。在软件设计中，单例模式常用于控制对资源的访问，例如数据库连接、线程池等。以下是单例模式的详…...

编程日记 2025/6/4 4:22:49

无人机数据集，支持YOLO，COCO json，PASICAL VOC xml格式的标注，正确识别率可达到95.7%，10000张原始图片

无人机数据集，支持YOLO，COCO json，PASICAL VOC xml格式的标注，正确识别率可达到95.7%，10000张原始图片下载地址： 标注好的数据集下载地址： yolo v11: https://download.csdn.net/download/p…...

编程日记 2025/6/3 8:35:23

Linux：进程概念（三.详解进程：进程状态、优先级、进程切换与调度）

目录 1. Linux中的进程状态 1.1 前台进程和后台进程运行状态睡眠状态磁盘休眠状态停止状态 kill指令—向进程发送信号死亡状态 2. 僵尸进程 2.1 僵尸状态 2.2 僵尸进程 2.3 僵尸进程危害 3. 孤儿进程 4. 进程的优先级概念查看进程优先级 PRI&#xff08…...

编程日记 2025/6/3 23:15:39

stack和queue专题

文章目录 stack最小栈题目解析代码栈的压入弹出序列题目解析代码 queue二叉树的层序遍历题目解析代码 stack stack和queue都是空间适配器最小栈最小栈的题目链接题目解析 minst是空就进栈，或者是val < minst.top()就进栈代码 class MinStack { public:M…...

编程日记 2025/6/3 23:15:23

一 rk3568 Android 11固件开发环境搭建（docker)

一目标搭建 rk3568 android 系统内核及固件开发编译调试环境, 支持开发环境导出分享基于荣品 rk3568 核心板系统环境： ubuntu22.04 /ubuntu20.04 64位桌面版编译环境: docker + ubuntu20.04 , 独立的容器隔离环境，不受系统库版本冲突等影响，无性能损耗，可…...

编程日记 2025/6/3 13:24:37

2025年华数杯国际赛B题论文首发+代码开源数据分享+代码运行教学

176项指标数据库任意组合千种组合方式 14页纯图无水印可视化 63页无附录正文 3万字 1、为了方便大家阅读，全文使用中文进行描述，最终版本需自行翻译为英文。 2、文中图形、结论文字描述均为ai写作，可自行将自己的结果发给ai&#xff0c…...

编程日记 2025/6/3 23:17:01

三小时深度学习PyTorch

【对新手非常友好】三小时深度学习PyTorch快速入门！包教会你的！ --人工智能/深度学习/pytorch_哔哩哔哩_bilibili从头开始，把概率论、统计、信息论中零散的知识统一起来_哔哩哔哩_bilibili从编解码和词嵌入开始，一步一步理解Trans…...

编程日记 2025/6/3 23:17:35

朴素贝叶斯分类器

一、生成模型（学习）（Generative Model） vs 判别模型（学习）（Discriminative Model） 结论：贝叶斯分类器是生成模型 1、官方说明生成模型对联合概率 p(x, y)建模&#x…...

编程日记 2025/6/3 23:15:57

商用车电子电气零部件电磁兼容条件和试验（2）—术语和定义

写在前面本系列文章主要讲解商用车电子/电气零部件或系统的传导抗干扰、传导发射和辐射抗干扰、电场辐射发射以及静电放电等试验内容及要求，高压试验项目内容及要求。若有相关问题，欢迎评论沟通，共同进步。(*^▽^*) 目录商用车电子电气…...

编程日记 2025/6/3 22:43:24

SimpleFOC01｜基于STM32F103+CubeMX，移植核心的common代码

导言如上图所示，进入SimpleFOC官网，点击Github下载源代码。如上图所示，找到仓库。 comom代码的移植后，simpleFOC的移植算是完成一大半。simpleFOC源码分为如下5个部分，其中communication是跟simpleFOC上位机通讯&a…...

编程日记 2025/6/3 23:17:18

物联网之传感器技术

引言在数字化浪潮席卷全球的今天，物联网（IoT）已成为推动各行各业变革的重要力量。而物联网传感器，作为物联网感知层的核心技术，更是扮演着不可或缺的角色。它们如同人类的五官，能够感知物理世界中的各种信…...

编程日记 2025/6/3 23:16:13

React：构建用户界面的JavaScript库

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2025/6/3 23:16:45

基于TypeScript封装 `axios` 请求工具详解

TypeScript 项目中，封装一个详细的 axios 请求工具可以提高代码的可维护性、可重用性，并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例，包括请求拦截器、响应拦截器、错误处理、以及类型定义。 1. 安装 Axios 首先，确保你…...

编程日记 2025/6/4 9:18:27

相关文章：