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

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,就用缩略图!

相关文章:

ant design的upload组件踩坑记录

antd版本 v4.17.0 1.自定义了onpreview和onchange事件&#xff0c;上传文件后&#xff0c;文件显示有preview的icon但是被禁用&#xff0c;无法调用onpreview事件。 问题展现&#xff1a; 苦苦查找原因&#xff0c;问题出在了这里&#xff0c;当文件没有url的时候&#xff0c…...

Python私教张大鹏 Vue3整合AntDesignVue之按钮组件

何时使用 标记了一个&#xff08;或封装一组&#xff09;操作命令&#xff0c;响应用户点击行为&#xff0c;触发相应的业务逻辑。 在 Ant Design Vue 中我们提供了五种按钮。 主按钮&#xff1a;用于主行动点&#xff0c;一个操作区域只能有一个主按钮。默认按钮&#xff1…...

【小海实习日记】PHP安装

## PHP环境搭建(Mac) ### php安装 使用brew需要安装homebrew >brew tap shivammathur/php >brew install shivammathur/php/php7.3 >brew link php7.3 这里可以需要homebrew使用代理进行下载&#xff0c;如果代理下载速度还是太慢&#xff0c;建议直接更该国内镜像…...

C++ Primer Chapter 4 Expressions

Chapter 4 Expressions 4.11 类型转换 4.11.2 其他隐式类型转换 数组转换成指针&#xff1a; 在大多数用到数组的表达式中&#xff0c;数组自动转换成指向数组首元素的指针&#xff1a; int ia[10]; int* ipa;♜ 当数组被用作decltype关键字的参数&#xff0c;或者作为取地…...

[leetcode hot 150]第一百三十七题,只出现一次的数字Ⅱ

题目&#xff1a; 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。 由于需要常数级空间和线性时间复杂度…...

wpf工程中加入Hardcodet.NotifyIcon.Wpf生成托盘

1、在项目中用nuget引入Hardcodet.NotifyIcon.Wpf。如下图所示。 2、在App.xaml中创建托盘界面&#xff0c;代码是写在 App.xaml 里面 注意在application中一定要加入这一行代码&#xff1a; xmlns:tb"http://www.hardcodet.net/taskbar" 然后在<Application.R…...

keil下载及安装(社区版本)

知不足而奋进 望远山而前行 目录 文章目录 前言 Keil有官方版本和社区版本&#xff0c;此文章为社区版本安装&#xff0c;仅供参考。 1.keil MDK 2.keil社区版介绍 3.keil下载 (1)打开进入登录界面 (2)点击下载,跳转到信息页面 (3)填写个人信息,点击提交 (4)点击下载…...

python书上的动物是啥

Python的创始人为Guido van Rossum。1989年圣诞节期间&#xff0c;在阿姆斯特丹&#xff0c;Guido为了打发圣诞节的无趣&#xff0c;决心开发一个新的脚本解释程序&#xff0c;做为ABC语言的一种继承。之所以选中Python作为程序的名字&#xff0c;是因为他是一个叫Monty Python…...

数据库管理-第198期 升级Oracle ACE Pro,新赛季继续努力(20240605)

数据库管理198期 2024-06-05 数据库管理-第198期 升级ACE Pro&#xff0c;新赛季继续努力&#xff08;20240605&#xff09;1 惊喜2 变化3 Oracle ACE总结 数据库管理-第198期 升级ACE Pro&#xff0c;新赛季继续努力&#xff08;20240605&#xff09; 作者&#xff1a;胖头鱼的…...

华为坤灵交换机S300, S500, S210,S220, S200, S310 如何WEB抓包

通过S系列交换机配置端口镜像实现抓包 1、应用场景 端口镜像是指将经过指定端口(源端口或者镜像端口)的报文复制一份到另一个指定端口(目的端口或者观察端口)。 在网络运营与维护的过程中&#xff0c;为了便于业务监测和故障定位&#xff0c;网络管理员时常要获取设备上的业务…...

【亚马逊云科技 CSDN 联合巨献】 「对话AI 构建者:从基础到应用的 LLM 全景培训」 限时免费!

&#x1f680;&#x1f31f;【亚马逊云科技 & CSDN 联合巨献】 &#x1f4da;「对话AI 构建者&#xff1a;从基础到应用的 LLM 全景培训」&#x1f525; 限时免费&#xff01; &#x1f4c6; 抓紧时间&#xff01;6月7日前注册&#xff0c;原价 399&#xff0c;现在仅需 0…...

【AI大模型】Function Calling

目录 什么是Function Calling 示例 1&#xff1a;调用本地函数 Function Calling 的注意事项 支持 Function Calling 的国产大模型 百度文心大模型 MiniMax ChatGLM3-6B 讯飞星火 3.0 通义千问 几条经验总结 什么是Function Calling Function Calling 是一种函数调用机…...

零钱兑换 - LeetCode 热题 85

大家好&#xff01;我是曾续缘&#x1f92a; 今天是《LeetCode 热题 100》系列 发车第 85 天 动态规划第 5 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 零钱兑换 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &…...

基于web的垃圾分类回收系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;公告管理&#xff0c;运输管理&#xff0c;基础数据管理 用户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;运输管理&#xff0c;公告…...

优化你的WordPress网站:内链建设与Link Whisper Pro插件的利用

文章目录 内链的重要性WordPress SEO插件&#xff1a;Link Whisper Pro主要功能使用指南下载与安装 结语 在数字营销和网站管理领域&#xff0c;SEO内部优化是提升网站排名、增加流量和提高用户参与度的核心策略。在众多SEO技巧中&#xff0c;内链建设是构建良好网站结构和提升…...

spring中那些地方使用了反射

1、依赖注入&#xff08;Dependency Injection&#xff09; Spring Boot通过反射机制将bean注入到相应的属性或构造函数中。当我们在Spring Boot中使用如Autowired这样的注解时&#xff0c;Spring容器会利用反射机制找到相应的bean并注入到对应的属性或构造函数中。 2、Bean的…...

1 机器人软件开发学习所需通用技术栈(一)

机器人软件工程师技术路线&#xff08;如有缺失&#xff0c;欢迎补充&#xff09; 1. 机器人软件开发工程师技术路线 1.1 基础知识 C/C编程&#xff1a;掌握C/C语言基础&#xff0c;包括数据结构、算法、内存管理等。操作系统&#xff1a;了解Linux或Windows等操作系统的基本…...

Java(十二)——Comparable接口与Comparator接口

文章目录 Comparable与Comparator接口Comparable接口Comparator接口 Comparable与Comparator接口 我们可能会遇到这样的问题&#xff1a;怎么对一个对象数组进行排序&#xff1f; 比如对一个狗类对象数组进行排序&#xff0c;而想到这&#xff0c;我们又会有一个问题&#xff…...

Nvidia Jetson/Orin +FPGA+AI大算力边缘计算盒子:轨道交通监控系统

株洲中车时代电气股份有限公司&#xff08;下称中车时代电气&#xff09;是中国中车旗下股份制企业&#xff0c;其前身及母公司——中车株洲电力机车研究所有限公司创立于1959年。中车时代电气扎根株洲&#xff0c;走好两条钢轨&#xff0c;走出两条钢轨。中车时代电气秉承“双…...

笔记 | 软件工程01:从程序到软件

1 软件工程知识域 2 程序 2.1 何为程序及程序的质量要求 何为程序&#xff1a; 理解&#xff1a;软件工程可能就是在弥补OOP语言与自然语言之间还存在的鸿沟 2.1.1 程序质量的内在和外在体现 2.1.2 程序质量的语法和语义体现 2.2 编写代码的基本原则 2.3 程序质量保证方法 …...

Go语言的分布式事务处理

Go语言的分布式事务处理 1. 分布式事务简介 在分布式系统中&#xff0c;事务处理变得更加复杂。传统的单机事务可以通过数据库的ACID特性来保证一致性&#xff0c;但在分布式环境中&#xff0c;由于网络延迟、节点故障等因素&#xff0c;确保多个服务之间的数据一致性成为一个挑…...

降AI率工具8元和3元的,处理80%+有区别吗

“8元一千字太贵了&#xff0c;3元那个不是也能用吗&#xff1f;” 这个问题很合理&#xff0c;特别是对于字数多的毕业论文&#xff0c;价格差距相当可观。 4万字的论文&#xff1a; 8元工具&#xff1a;320元3元工具&#xff1a;约130元 差了190元。那这190元换来的是什么…...

CANOE进阶:CAPL文件读写实战与数据持久化策略

1. CAPL文件读写在车载测试中的核心价值 第一次接触CAPL文件读写功能时&#xff0c;我正负责一个车载ECU的耐久性测试项目。当时需要连续记录72小时的CAN报文数据&#xff0c;如果仅靠CANoe的Trace窗口查看&#xff0c;不仅效率低下&#xff0c;后期分析更是无从下手。这时我才…...

3个技巧让你轻松掌控暗黑2角色命运:d2s-editor的存档修改艺术

3个技巧让你轻松掌控暗黑2角色命运&#xff1a;d2s-editor的存档修改艺术 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 在《暗黑破坏神2》的冒险旅程中&#xff0c;你是否曾因误加属性点而让精心培养的角色沦为废号&#xff1…...

如何从零开始搭建Cubli_Mini自平衡机器人:终极完整指南

如何从零开始搭建Cubli_Mini自平衡机器人&#xff1a;终极完整指南 【免费下载链接】Cubli_Mini 项目地址: https://gitcode.com/gh_mirrors/cu/Cubli_Mini Cubli_Mini是一款令人惊叹的开源自平衡立方体机器人&#xff0c;它通过三个正交安装的飞轮实现姿态控制&#x…...

OpenClaw安全配置指南:Qwen3-14b_int4_awq模型权限管理

OpenClaw安全配置指南&#xff1a;Qwen3-14b_int4_awq模型权限管理 1. 为什么需要特别关注OpenClaw的安全配置&#xff1f; 去年夏天&#xff0c;我在调试一个自动整理文档的OpenClaw任务时&#xff0c;不小心让AI助手误删了工作目录下的重要文件。这次经历让我深刻意识到&am…...

7个实用技巧让你轻松掌握E-Hentai漫画下载与管理

7个实用技巧让你轻松掌握E-Hentai漫画下载与管理 【免费下载链接】E-Hentai-Downloader Download E-Hentai archive as zip file 项目地址: https://gitcode.com/gh_mirrors/eh/E-Hentai-Downloader 漫画下载痛点与解决方案 作为漫画爱好者&#xff0c;你是否遇到过这些…...

如何用mootdx解决金融数据获取难题?探索量化分析的高效路径

如何用mootdx解决金融数据获取难题&#xff1f;探索量化分析的高效路径 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 问题发现&#xff1a;金融数据分析的三大痛点 当你准备构建量化交易模型时…...

企业级数据采集架构实战:破解动态字体加密的高性能爬虫系统

企业级数据采集架构实战&#xff1a;破解动态字体加密的高性能爬虫系统 【免费下载链接】dianping_spider 大众点评爬虫&#xff08;全站可爬&#xff0c;解决动态字体加密&#xff0c;非OCR&#xff09;。持续更新 项目地址: https://gitcode.com/gh_mirrors/di/dianping_sp…...

实测梦幻动漫魔法工坊:用LoRA调整画风,轻松打造不同风格的动漫作品

实测梦幻动漫魔法工坊&#xff1a;用LoRA调整画风&#xff0c;轻松打造不同风格的动漫作品 1. 工具概览 梦幻动漫魔法工坊是一款基于Diffusion模型和LoRA微调技术的动漫图像生成工具。它最大的特点是通过简单的界面操作&#xff0c;就能生成各种风格的二次元图像&#xff0c;…...