当前位置: 首页 > 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 程序质量保证方法 …...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...