antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

  • 效果图
  • 代码解析

效果图

在这里插入图片描述
在这里插入图片描述

代码解析

import { Form, Upload, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { BASE_URL } from '@/utils/request';
const FormItemInputUpload = (props) => {const [visble, setVisibel] = useState(false); //用于图判断图标是否显示useEffect(() => {if (props) {setVisibel(false); //防止上传图片后取消,重置数据后,上传图标和图片都不显示}}, [props]);const normFile = (e) => {// 上传判断,有文件则隐藏上传图标,否则显示if (e.fileList.length == 0) {setVisibel(false);} else {setVisibel(true);}if (Array.isArray(e)) {return e;}return e?.fileList;};const onRemove = (e) => {// 因为antd本身缺陷,我们上传成功后,再次删除后,系统会默认为已经上传,导致不为空验证失效。//所以我们图片移除后同时改变表单值const urls = [props.form.getFieldValue(props.name)].flat().filter((item) => item != e.response.data[0].imageAddress);props.form.setFieldsValue({[props.name]: urls,});};return (<Form.Itemlabel={props.label}name={props.name}valuePropName="fileList"getValueFromEvent={normFile}rules={// 必填验证,rules是组件传入的值,有则必填 props?.rules && [{required: true,validator: (_, value, callback) => {if (!value || value.length == 0) {callback(`请上传${props.label}`);} else {callback();}},},]}><UploadmaxCount={props?.maxCount || 1}action={`${BASE_URL}/cdsj-file/upload`}name="files"headers={{ Authorization: localStorage.getItem('token') }}listType="picture-card"accept=".png,.jpeg,.jpg"beforeUpload={(file) => {const isPNG =file.type == 'image/png' ||file.type == 'image/jpg' ||file.type == 'image/jpeg';if (!isPNG) {message.error('请上传图片格式文件!');}return isPNG || Upload.LIST_IGNORE;}}onRemove={onRemove}>{visble ? null : <PlusOutlined />}</Upload></Form.Item>);
};export default FormItemInputUpload;

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

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

相关文章

网络爬虫-----初识爬虫

目录 1. 什么是爬虫&#xff1f; 1.1 初识网络爬虫 1.1.1 百度新闻案例说明 1.1.2 网站排名&#xff08;访问权重pv&#xff09; 2. 爬虫的领域&#xff08;为什么学习爬虫 ?&#xff09; 2.1 数据的来源 2.2 爬虫等于黑客吗&#xff1f; 2.3 大数据和爬虫又有啥关系&…

stm32---基本定时器(TIM6,TIM7)

STM32F1的定时器非常多&#xff0c;由两个基本定时器&#xff08;TIM6&#xff0c;TIM7&#xff09;、4个通用定时器&#xff08;TIM2-TIM5&#xff09;和两个高级定时器&#xff08;TIM&#xff11;&#xff0c;TIM&#xff18;&#xff09;组成。基本定时器的功能最为简单&am…

自动创建设备节点udev机制实现

自动创建设备节点udev机制实现过程&#xff1a; 1.当插入设备&#xff0c;内核会向udev发送一个事件&#xff0c;其中包含着设备的信息。 2.udev会根据收到的设备信息匹配相应的规则文件。 3.udev会根据规则文件中的配置&#xff0c;创建一个唯一的设备节点文件。通常存储在/d…

〔022〕Stable Diffusion 之 生成视频 篇

✨ 目录 &#x1f388; 视频转换 / mov2mov&#x1f388; 视频转换前奏准备&#x1f388; 视频转换 mov2mov 使用&#x1f388; 视频转换 mov2mov 效果预览&#x1f388; 视频无限缩放 / Infinite Zoom&#x1f388; 视频无限缩放 Infinite Zoom 使用 &#x1f388; 视频转换 /…

ITIL 4—创建、交付和支持—设定工作优先级和管理供应商

5. 设定工作优先级和管理供应商 5.1 为什么我们要对工作优先级排序? 只要工作需求超出了在预期时间内能完成的产能&#xff0c;就会出现排队的情况。在理想情况下&#xff0c;组织的需求没有任何变化&#xff0c;并且拥有满足需求所需的适当质量和数量的资源。但现实里&…

Tomcat多实例部署和动静分离

一、多实例部署&#xff1a; 多实例&#xff1a;多实例就是在一台服务器上同时开启多个不同的服务端口&#xff0c;同时运行多个服务进程&#xff0c;这些服务进程通过不同的socket监听不同的服务端口来提供服务。 1.前期准备&#xff1a; 1.关闭防火墙&#xff1a;systemctl …

Multi Query Attention Group Query Attention

Multi Query Attention(MQA)在2019年就被提出来了&#xff0c;用于推理加速&#xff0c;但在当时并没有受到很多关注&#xff0c;毕竟一张2080就能跑Bert-base了。随着LLM的大火&#xff0c;MQA所带来的收益得以放大。 思路 Multi Query Attention(MQA)跟Multi Head Attention…

coudn‘t deserialize object in variable ‘entity‘.获取流程变量无法反序列化问题

coudn‘t deserialize object in variable ‘entit y‘.获取流程变量无法反序列化问题 尝试反序列化一个对象到变量 ‘entity’ 时失败。这个问题可能有很多原因&#xff0c;下面是一些可能的情况和解决方案&#xff1a; 1、对象格式不正确&#xff1a;被反序列化的对象可能不…

计算机视觉实战项目(图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别)

图像分类 教程博客_传送门链接:链接 在本教程中&#xff0c;您将学习如何使用迁移学习训练卷积神经网络以进行图像分类。您可以在 cs231n 上阅读有关迁移学习的更多信息。 本文主要目的是教会你如何自己搭建分类模型&#xff0c;耐心看完&#xff0c;相信会有很大收获。废话不…

自动驾驶汽车下匝道路径优化控制策略研究

摘要 随着社会不断进步&#xff0c; 经济快速发展&#xff0c; 科学技术也在突飞猛进&#xff0c; 交通行业是典型的领域之一。现阶段的交通发展&#xff37; 实现智能交通系统为目标&#xff0c; 正逐渐从信息化步入智能化&#xff0c;朝着智慧化迈进。近年来&#xff0c;一系…

DeepinV20/Ubuntu安装postgresql方法

首先&#xff0c;建议看一下官方的安装文档PostgreSQL: Linux downloads (Ubuntu) PostgreSQL Apt Repository 简单的说&#xff0c;就是Ubuntu下的Apt仓库&#xff0c;可以用来安装任何支持版本的PgSQL。 If the version included in your version of Ubuntu is not the one…

嵌入式IDE(1):IAR中ICF链接文件详解和实例分析

最近在使用NXP的提供的MCUXPresso IDE&#xff0c;除了Eclipse固有的优点外&#xff0c;我觉得它最大的优点就是在链接脚本的生成上&#xff0c;提供了非常直观的GUI配置界面。但这个IDE仅仅支持NXP相关的产品&#xff0c;而且调试的性能在某些情况下并不理想。而我们用得比较多…

【kafka】kafka重要的集群参数配置

如何规划Kafka 对于实际应用的生产环境中&#xff0c;需要尽量先规划设计好集群&#xff0c;避免后期业务上线后费力调整。在考量部署方案时需要通盘考虑&#xff0c;不能仅从单个维度上进行评估&#xff0c;下面是几个重要的维度的考量和建议&#xff1a; 这里重点说说操作系…

MYBATIS-PLUS入门使用、踩坑记录

转载&#xff1a; mybatis-plus入门使用、踩坑记录 - 灰信网&#xff08;软件开发博客聚合&#xff09; 首先引入MYBATIS-PLUS依赖&#xff1a; SPRING BOOT项目&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus…

Spring Boot + Vue的网上商城之客服系统实现

Spring Boot Vue的网上商城之客服系统实现 在网上商城中&#xff0c;客服系统是非常重要的一部分&#xff0c;它能够为用户提供及时的咨询和解答问题的服务。本文将介绍如何使用Spring Boot和Vue.js构建一个简单的网上商城客服系统。 思路 在本教程中&#xff0c;我们学习了…

Debian 使用 systemd 自动挂载 Samba

本文地址&#xff1a;blog.lucien.ink/archives/540 写成了一键脚本&#xff0c;直接执行即可。 需要注意的是&#xff0c;挂载的路径和 systemd service 的名字要对应上&#xff0c;比如挂载的路径为 /mnt/nas 那 service 的文件名应为 mnt-nas.service。 #!/usr/bin/env ba…

C++信息学奥赛1170:计算2的N次方

#include <iostream> #include <string> #include <cstring>using namespace std;int main() {int n;cin >> n; // 输入一个整数nint arr[100];memset(arr, -1, sizeof(arr)); // 将数组arr的元素初始化为-1&#xff0c;sizeof(arr)表示arr数组的字节…

数据结构和算法之冒泡排序

冒泡排序是一种简单的排序算法&#xff0c;它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就交换位置&#xff0c;直到没有再需要交换的元素。该算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 #mermaid-svg-0y56kW…

【Linux】:Centos7安装Kafka

目录 一.先安装zookeeper并启动 二.安装kafka 一.先安装zookeeper并启动 1.下载 https://www.apache.org/dyn/closer.lua/zookeeper/zookeeper-3.8.2/apache-zookeeper-3.8.2-bin.tar.gz 2.上传到Linux任意目录下 3.解压到/user/local/文件夹下 [rootlocalhost app]# tar …

分类预测 | Matlab实现基于BP-Adaboost数据分类预测

分类预测 | Matlab实现基于BP-Adaboost数据分类预测 目录 分类预测 | Matlab实现基于BP-Adaboost数据分类预测效果一览基本介绍研究内容程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于BP-Adaboost数据分类预测&#xff08;Matlab完整程序和数据&#xff09; 2.多特征输入…