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,一经查实,立即删除!

相关文章

重参数化(Reparameterization)的原理

重参数化&#xff08;Reparameterization&#xff09;的原理 重参数化是变分自编码器&#xff08;VAE&#xff09;中用来解决可微分性问题的一种技术。在VAE中&#xff0c;我们的目标是最大化观测数据的边缘对数似然&#xff0c;这涉及到一个隐含变量 z z z的积分或求和。因为…

【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 左…

前端vue scope的定义以及用法

这段代码是 Vue 组件中用于定义表格列的代码&#xff0c;包含了自定义模板和逻辑&#xff0c;以显示特定格式的内容。在这里&#xff0c;el-table-column 来自 Element UI 框架&#xff0c;提供了一种简洁的方式来定义表格的列及其显示内容。 让我们看看这段代码的细节&#x…

第一个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;让我们…

oracle sql 示例

-- 获取每个学员按照成绩的排名 selectt1.*,row_number() over (partition by student_name order by score desc) rn from t_score t1; -- 查询每个部门去除最高、最低薪水后的平均薪水 with t1 as (select t_salary_table.*,row_number() over (partition by department_id …

JVM(Java虚拟机)功能特点、垃圾回收机制

简介 JVM&#xff08;Java虚拟机&#xff09;是一种虚拟的计算机执行环境&#xff0c;用于执行Java字节码。Java虚拟机不仅仅用于执行Java语言编写的程序&#xff0c;还可以执行其他编译成Java字节码的语言&#xff08;如Kotlin、Scala等&#xff09;编写的程序。JVM的主要目标…

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

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

web前端代码指南(vue3)

一、命名规范 市面上常用的命名规范&#xff1a; camelCase&#xff08;小驼峰式命名法 —— 首字母小写&#xff09;PascalCase&#xff08;大驼峰式命名法 —— 首字母大写&#xff09;kebab-case&#xff08;短横线连接式&#xff09;Snake&#xff08;下划线连接式&#…

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(未知的操作系统)

vue 3 + TS 组合式标注类型

1.组件的 emits 标注类型 <script setup lang"ts"> // 运行时 const emit defineEmits([change, update])// 基于选项 const emit defineEmits({change: (id: number) > {// 返回 true 或 false// 表明验证通过或失败},update: (value: string) > {//…

XiaodiSec day015 Learn Note 小迪安全学习笔记

XiaodiSec day015 Learn Note 小迪安全学习笔记 记录得比较凌乱&#xff0c;不尽详细 day15 还是基础的Php开发 看来是比较基础的 主题&#xff1a;登录验证 COOKIE & SESSION 后台系统有多个验证 为了方便验证使用cookie或session 类似于用户状态管理? cookie存储…

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 …

代码随想录打卡—day28—【回溯】— 回溯基础练习 4.17+4.19

1 93. 复原 IP 地址 也是类似前一天的分割回文串。可以用我的字符之间0101的思路&#xff0c;也可以直接用[start_idx,i]选取子串的方法&#xff0c;选取后者&#xff0c;代码简洁一点&#xff1a; class Solution { public:vector<string> ans;string path;void dfs(i…

【Ansible】04

【Ansible】03 任务块 block任务块 使用 block 可以将多个任务合并为一个组可以将整个 block任务组 , 一起控制是否要执行 # 如果webservers组中的主机系统发行版是Rocky&#xff0c;则安装并启动nginx [rootpubserver ansible]# vim block1.yml --- - name: block tasksho…