antd中Upload上传图片宽高限制以及上传文件的格式限制

项目中有一个需求,要上传轮播图,且有尺寸要求,所以就需要在上传图片的时候进行尺寸限制,使用了Upload组件,需要在组件的beforeUpload方法中进行限制。

定义一个上传前的方法,并且添加一个图片尺寸获取的方法:

如果尺寸不符合要求,validateImageSize方法会返回false,如果尺寸符合就会返回true

// Carousel upload handleconst carouselUpload: any = async (file: any) => {console.log('only limit 750x420', file)const limitSize = await validateImageSize(file)if (!limitSize) {console.log('only limit error', file)message.error('图片尺寸不符合要求,请重新上传')}return limitSize || Upload.LIST_IGNORE}const validateImageSize = (file: any) => {return new Promise((resolve, reject) => {const reader = new FileReader()reader.onload = (e: any) => {const image = new Image()image.onload = function () {const { width, height } = this as anyconsole.log('image size is width  height', width, height)if (width === 150 && height === 150) {resolve(true)} else {resolve(false)}}image.onerror = rejectimage.src = e.target.result}reader.onerror = rejectreader.readAsDataURL(file)})}

组件中添加使用:

                    <Uploadaction="https://dev.hado-official.cn/service_api/file_upload"accept="image/*"fileList={fileList}maxCount={3}beforeUpload={carouselUpload}onChange={onChange}onPreview={onPreview}>{fileList.length < 5 && (<div className="uploadBox"><span className="uploadBtn">点击上传</span><span className="uploadTips">最多3张,单张图片不超过10MB,尺寸750*420px,支持jpg/png/bmp格式</span></div>)}</Upload>

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

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

相关文章

【Redis】Zset 数据类型

文章目录 常用命令zaddzcard & zcountzrange & zrevrangezpopmax & bzpopmaxzpopmin & bzpopminzrank & zrevrankzscore & zremzremrangebyrank & zremrangebyscorezincrby 多个集合间的交互命令交集 & zinterstore并集 & sunionstore 内部…

【声呐仿真】学习记录0.5-配置ssh远程连接docker、在docker中使用nvidia显卡

【声呐仿真】学习记录0.5-配置ssh远程连接docker、在docker中使用nvidia显卡 配置ssh远程连接docker1.端口映射2.配置ssh 在docker中使用nvidia显卡配置CUDA 注意&#xff1a;之前已经创建过容器的&#xff0c;需要打包成镜像&#xff0c;重新创建容器&#xff0c;因为要在创建…

【C++庖丁解牛】C++11---右值引用和移动语义

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 1 左值引用和右值引用2 左…

第一个Spring Boot程序

目录 一、Spring Boot介绍 二、创建Spring Boot项目 1、插件安装&#xff08;专业版不需要&#xff09; 2、创建SpringBoot项目 &#xff08;1&#xff09;这里如果插件下载失败&#xff0c;解决方案&#xff1a; &#xff08;2&#xff09;项目启动失败&#xff0c;解决…

web测试基础知识

目录 web系统的基础 web概念(worldwideweb) 网络结构 发展 架构 B/S C/S P2P 工作原理 静态页面 动态页面 web客户端技术 浏览器的核心--渲染引擎 web服务器端技术 web服务器 应用服务器 集群环境 数据库 案例-URL 协议类型 主机名 端口 IP地址 分类 …

C#开发的全套成熟的LIS系统源码JavaScript+SQLserver 2012区域云LIS系统源码

C#开发的全套成熟的LIS系统源码JavaScriptSQLserver 2012区域云LIS系统源码 医院云LIS系统是一套成熟的实验室信息管理系统&#xff0c;目前已在多家三级级医院应用&#xff0c;并不断更新。云LIS系统是为病人为中心、以业务处理为基础、以提高检验科室管理水平和工作效率为目标…

贪心算法练习day.1

理论基础 贪心算法是一种常见的解决优化问题的方法&#xff0c;其基本思想就是在问题的每个决策阶段&#xff0c;都选择当前看起来最优的选择&#xff0c;即贪心地做出局部的最优决策&#xff0c;以此得到全局的最优解&#xff0c;例如在十张面额不同的钞票&#xff0c;让我们…

润申信息企业标准化管理系统 AddNewsHandler.ashx 任意用户创建漏洞复现

0x01 产品简介 润申信息科技企业标准化管理系统通过给客户提供各种灵活的标准法规信息化管理解决方案,帮助他们实现了高效的标准法规管理,完成个性化标准法规库的信息化建设。 0x02 漏洞概述 润申信息企业标准化管理系统 AddNewsHandler.ashx 接口处存在任意用户创建漏洞,…

Linux安装部署Tomcat

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Linux安装部署Tomcat //将tomcat压缩包解压到对…

python识别电脑是windows还是linux

代码实现 import osif os.name nt:print(当前操作系统是 Windows) elif os.name posix:print(当前操作系统是 Linux 或 Unix 类型的系统) else:print(未知的操作系统)

kubernetes中的副本控制器rc(replicationcontrollers)和rs(replicasets)

一、rc控制器replicationcontrollers rc控制器就是控制相同pod副本数量 使用rc控制器资源创建pod&#xff0c;设定创建pod资源的数量 1.1 案例 1.1.1、创建资源清单 [rootmaster rc-demo]# cat rc.yaml apiVersion: v1 kind: ReplicationController metadata: name: rc01 …

个人搭建alist网盘的经验记录备忘

1、搭建宝塔LINUX面板&#xff0c;安装Docker 2、添加仓库 3、从镜像拉取xhofe/alist:latest 4、添加容器 5、新建一个网站&#xff0c;别忘记申请个SSL证书&#xff0c;重要的是反向代理 6、新建个mysql数据库 7、修改alist数据库的链接地址&#xff0c;方便自己备份&a…

如何有效地进行汽车制造业文件共享,一文了解

随着数字化转变&#xff0c;企业的业务文件大多通过电子形式在内外部流转。这增加了外发文件数据泄露或被篡改的风险&#xff0c;如何保护外发文件安全已成为企业不容忽视的课题。其中汽车制造业是一个高度依赖文件共享与协作的行业&#xff0c;涉及设计图纸、技术文件、供应链…

Docker命令总结

一.Docker常用命令总结 1.镜像命令管理 指令描述ls列出镜像build构建镜像来自Dockerfilehistory查看历史镜像inspect显示一个或多个镜像的详细信息pull从镜像仓库拉取镜像push推送一个镜像到仓库rm移除一个或多个镜像prune一处未使用的的镜像&#xff0c;没有被标记或被任何容…

【用户投稿】Apache SeaTunnel 2.3.3+Web 1.0.0版本安装部署

项目概要 Apache SeaTunnel 是一个分布式、高性能、易扩展的数据集成平台&#xff0c;用于实时和离线数据处理,支持多种数据源之间的数据迁移和转换。 其中&#xff0c;Apache-seatunnel-web-1.0.0-bin.tar.gz和apache-seatunnel-2.3.3-bin.tar.gz代表了 Apache SeaTunnel Web…

RTT学习 开发环境搭建

添加文件到工程 BSP下的applications文件夹用于存放用户自己的应用代码&#xff0c;目前只有一个main.c文件&#xff0c;如果用户的应用代码不是很多&#xff0c;建议相关源文件都放在这个文件夹下面&#xff0c;在applications文件夹下新增两个简单的文件hello.c和hello.h。 …

什么是正向代理和反向代理

正向代理和反向代理是两种不同的代理服务器配置方式&#xff0c;它们在代理的方向和作用上有所不同。 一、正向代理&#xff08;Forward Proxy&#xff09; 代表客户端发送请求到其他服务器的代理服务器。客户端将请求发送给正向代理服务器&#xff0c;然后由正向代理服务器代…

如何使用OSI七层模型的思路进行Linux网络问题排障?

在运维工作中&#xff0c;我们可能经常遇到诸如服务器无法远程连接、网站无法访问等各种网络问题。此时你是否想过&#xff0c;我们常背的OSI七层模型&#xff0c;能在处理这样的实际问题中发挥什么样的作用呢&#xff1f; 基于OSI架构的方法论&#xff0c;我们可以使用自下而…

ATFX汇市:欧元区和美国的制造业PMI将发布,市场预期乐观

ATFX汇市&#xff1a;今日16:00&#xff0c;市场研究机构Markit将发布欧元区4月制造业PMI初值&#xff0c;前值为46.1&#xff0c;预期值46.6&#xff0c;预期将增加0.5个百分点。历史数据看&#xff0c;最近三个月&#xff0c;欧元区的制造业PMI均处于较高水平&#xff0c;期间…

Springboot+Vue项目-基于Java+MySQL的房屋租赁系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…