ant design的upload组件踩坑记录

antd版本 v4.17.0

1.自定义了onpreview和onchange事件,上传文件后,文件显示有preview的icon但是被禁用,无法调用onpreview事件。

问题展现:

苦苦查找原因,问题出在了这里,当文件没有url的时候,按钮被禁用掉了,官方文档没有说明。

2.给图片和pdf文件自定义了icon,但是pdf的icon正常展示,图片一直显示缩略图

问题展现:

这是自定义的iconRender函数 函数正常

  iconRenderU = (file) => {
    const { type = '', status = '', url = '' } = file;
    if (status === 'done') {
      if ((type.indexOf('pdf') > -1 || url?.includes('.pdf')) && status === 'done') {
        return <img src={upload_Pdf} style={{ height: '58%', display: 'inherit' }} />
      } else if (type.indexOf('image/') > -1) {
        return <img src={upload_img} style={{ height: '58%', display: 'inherit' }} />
      }
    } else {
      return <div style={{ textAlign: 'center' }}>
        <LoadingOutlined style={{ color: '#BA051B' }} />
      </div>
    }
  }

定位问题,问题出在了listType这个属性上,配置了‘picture-card’后 iconRender函数对于图片类型的失效。

解决办法,把listType属性去掉,取默认值text

但是!!这样的话要给upload写样式。。更麻烦,于是找产品解决,不用icon,就用缩略图!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于FPGA的图像一维FFT变换IFFT逆变换verilog实现,包含tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 fpga仿真结果 matlab调用FPGA的仿真结果进行图像显示 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 ......................…

mac系统内存占用过高怎么办 优化电脑内存的方法系统加速

不少Mac用户都对mac系统内存占用过高非常头痛&#xff0c;不过这是mac在使用过程中一个很常见的问题&#xff0c;它会影响用户的操作体验&#xff0c;导致系统运行速度缓慢&#xff0c;甚至出现明显的卡顿现象。面对mac系统内存占用过高怎么办这个问题&#xff0c;其实很好解决…

C#操作MySQL从入门到精通(11)——对查询数据使用正则表达式过滤

前言 对于之前提到的使用匹配、比较、通配符等过滤方式能解决大部分的项目问题,但是有时候也会遇到一些比较复杂的过滤需求,这时候就需要正则表达式来实现了,正则表达式使用regexp这个关键字来实现。 本次测试的数据库表的内容如下: 1、基本字符匹配(包含某些字符) 匹…

git一次提交多个项目之windows

方案1:【快速】单个/多个项目提交到一个已有地址 步骤: 1,在git仓库,创建新的地址 2,在代码所在文件夹,编辑脚本 2.1,获得所有文件名:编写bat脚本,获得所有文件名称【非必须】; dir *.* /b/s>test.txt 获取所有文件之后,复制对应的文件名; 2.2,编写bat脚…

如何做好电子内窥镜的网络安全管理?

电子内窥镜作为一种常用的医疗器械&#xff0c;其网络安全管理对于保护患者隐私和医疗数据的安全至关重要。以下是一些基本原则和步骤&#xff0c;用于确保电子内窥镜的网络安全&#xff1a; 1. 数据加密 为了防止数据泄露&#xff0c;电子内窥镜在传输患者图像数据时应采取有…

嵌入式软件跳槽求指导?

嵌入式软件行业的跳槽确实需要一些特定的策略和技巧。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 因为这个…

Sleep | 纺锤波-慢波耦合与解决问题的能力:年龄的影响

摘要 本研究考察了衰老如何影响睡眠在巩固新学习的认知策略中的作用。共纳入40名健康年轻人(20-35岁)和30名健康老年人(60-85岁)。参与者接受了河内塔(ToH)任务的训练&#xff0c;然后&#xff0c;每个年龄组的一半参与者被分配到90分钟的午睡条件下&#xff0c;另一半则保持清…

0605-JavaSE-单例模式-饿懒汉模式

​​​​​​​ 不能放在方法里面&#xff08;因为每个线程调用都会在方法里面实例化一个locker对象&#xff0c;但不属于同一个对象&#xff09;&#xff0c;然后要用static修饰成静态变量才会起到效果 //单例设计模式 //饿汉模式&#xff1a;在加载类的时候就已经开始创建 /…

极压抗磨剂属于润滑油添加剂 我国生产企业众多

极压抗磨剂属于润滑油添加剂 我国生产企业众多 常见润滑油添加剂包括极压抗磨剂、防腐防锈剂、抗氧剂、泡沫抑制剂、清净剂、分散剂等。极压抗磨剂指能够增强润滑油抗磨和极压性能的润滑油添加剂&#xff0c;具有耐腐蚀、粘附力强、耐热等优势&#xff0c;在航空航天、汽车制造…

王道408数据结构CH2_线性表

概述 2 线性表 2.1 基本操作 2.2 顺序表示 线性表的元素从1开始&#xff0c;数组元素下标从0开始 2.2.1 结构体定义 #define Maxsize 50typedef struct{ElemType data[Maxsize];int length; }SqList;#define Initsize 100typedef struct{ElemType *data;int Maxsize ,length;…

DVWA-CSRF

CSRF Low 观察后端代码&#xff0c;只要password_new等于password_conf就可以修改密码。由于这两个参数是通过GET传递的&#xff0c;所以直接构造payload。 http://192.168.20.156/DVWA/vulnerabilities/csrf/?password_newpass&password_confpass&ChangeChange# 这…

PDF批量加水印 与 去除水印实践

本文主要目标是尝试去除水印&#xff0c;但是为了准备测试数据&#xff0c;我们需要先准备好有水印的pdf测试文件。 注意&#xff1a;本文的去水印只针对文字悬浮图片悬浮两种特殊情况&#xff0c;即使是这两种情况也不代表一定都可以去除水印。 文章目录 批量添加透明图片水印…

[行业原型] 汽车供应链多地分销一站式云端解决方案

互联网改变了企业经营模式、竞争环境&#xff0c;同时还在改变企业的交易方式&#xff0c;影响着企业间的协作。 全球化电子商务环境下&#xff0c;传统的供应链管理模式不能适应新环境下供应链管理要求&#xff0c;新的供应链管理模式—eSCM。 eSCM是将分销管理、客户资源管理…

网络工程从头做-1

网络工程从头做-1 自下而上&#xff0c;从接入交换机开始网络的配置和规划 实验拓扑&#xff1a; 实验步骤&#xff1a; 1.完成基本配置 1.1 PC端IP地址信息配置略 1.2 接入层交换机S1配置 [Huawei]sys S1 [S1]undo in [S1]vlan b 10 20 [S1]int e0/0/1 [S1-Ethernet0/0/1]p l…

免费,C++蓝桥杯等级考试真题--第7级(含答案解析和代码)

C蓝桥杯等级考试真题--第7级 答案&#xff1a;D 解析&#xff1a;步骤如下&#xff1a; 首先&#xff0c;--a 操作会使 a 的值减1&#xff0c;因此 a 变为 3。判断 a > b 即 3 > 3&#xff0c;此时表达式为假&#xff0c;因为 --a 后 a 并不大于 b。因此&#xff0c;程…

Java——包装类、泛型简介

一、包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了一个包装类型 1.1 基本数据类型和对应的包装类 基本数据类型包装类byteByteshortShortintIntegerlongLongfloatFloatdoub…

[图解]企业应用架构模式2024新译本讲解09-领域模型2

1 00:00:01,750 --> 00:00:03,030 代码还是一样的 2 00:00:03,040 --> 00:00:12,640 我们还是从前面人家做的复刻案例来看 3 00:00:14,170 --> 00:00:15,200 这个是它的类图 4 00:00:15,640 --> 00:00:20,650 我们同样用UModel逆转&#xff0c;这个太小了&#…

博物馆文物库房管理软件

博物馆作为文化遗产的守护者和传承者&#xff0c;承载着人类智慧与文明的结晶。在博物馆的背后&#xff0c;一个庞大而严密的管理系统支撑着文物的保护与展示。而其中&#xff0c;文物库房管理软件的使用&#xff0c;无疑是一项重要的管理工具。 文物库房管理软件的功能具有多样…

EDA数据跨网交换解决方案,一文了解

EDA数据通常与电子设计自动化相关&#xff0c;这是一种利用计算机辅助设计&#xff08;CAD&#xff09;软件来完成超大规模集成电路&#xff08;VLSI&#xff09;芯片的功能设计、综合、验证、物理设计等流程的技术。以下是一些会涉及到EDA数据的行业&#xff1a; 集成电路设计…

Hadoop3:MapReduce源码解读之Mapper阶段的FileInputFormat的切片原理(2)

Job那块的断点代码截图省略&#xff0c;直接进入切片逻辑 参考&#xff1a;Hadoop3&#xff1a;MapReduce源码解读之Mapper阶段的Job任务提交流程&#xff08;1&#xff09; 4、FileInputFormat切片源码解析 切片入口 获取切片 获取切片最大的Size和切片最小的Size 判断文…