React项目,结合 Antd 的Upload上传组件实现上传前校验

背景

最近工作中,遇到这样一个需求:在登录首页,开发一个上传文件的功能,用户可以在该页面点击该区域上传文件,但是点击前需要做一些判断,若用户未登录,则直接弹出登录弹框;否则,弹出上传文件选择框。

准备工作

一开始,先去看官网,是否有该场景的 api,貌似有一个beforeUpload属性

上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入 File 或 Blob 对象则上传 resolve 传入对象);也可以返回 Upload.LIST_IGNORE,此时列表中将不展示此文件。 注意:IE9 不支持该方法

仔细分析,发现该属性不太满足我的需求:因为该属性,是在文件上传之前,文件选择框被打开之后,选中文件然后上传时,才执行的钩子。此时文件选择框已经被打开了,而我的需求是,假如用户未登录,是直接弹出登录弹框。因此该api 不太行。

最终,想到一个思路,结合openFileDialogOnClick属性( 该属性官方解释是 点击打开文件对话框。默认是 true)。设置openFileDialogOnClick为 false,保证一开始不可以点击打开文件对话框,只有满足条件,才可以打开,具体看下面伪代码:

// 掺杂了一些业务代码,关键是看思路,具体可以自己结合公司需求,写对应的逻辑// 默认不可以点击
const [openFileDialog, setOpenFileDialog] = useState<boolean>(false)const uploadButtonRef = useRef<HTMLImageElement>(null)// 打开文件选择框前进行判断
const checkStatus = async () => {if(openFileDialog === false){// 已登录if (user.user.id) {// openFileDialog设置为 truesetOpenFileDialog(true)// 保证点击前,openFileDialog已经被设置为 true(这一步很关键,不然会有 bug,大家可以把这一行注释了自己试一下)setTimeout(() => {uploadButtonRef.current?.click() }, 50)														} else {// 未登录,直接弹出登录弹框user.loginEvent()return}					}
}const handleUploadFile = async (file: any) => {console.log("文件上传时可以做一下处理")
}<div onClick={checkStatus}><Upload.DraggerbeforeUpload={handleUploadFile} openFileDialogOnClick={openFileDialog}>	<Imagesrc={require(`@/assets/img/home/home-upload.png`)}ref={uploadButtonRef}alt='上传'width={88} 						unoptimized={true} /><div className="item-title"><span className='upload-text__left'>点击 </span>						<span className='upload-text__right'>或将文件拖到这里上传</span>	</div>	</Upload.Dragger>	
</div>

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

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

相关文章

Python 开心消消乐

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

《德米安:彷徨少年时》

文前 我之所愿无非是尝试依本性而生活&#xff0c; 却缘何如此之难&#xff1f; 强盗 疏于独立思考和自我评判的人只能顺应现成的世俗法则&#xff0c;让生活变轻松。其他人则有自己的戒条&#xff1a;正派人惯常做的事于他可能是禁忌&#xff0c;而他自认合理的或许遭他人唾…

机器学习笔记(概念)

一.基础概念 1.机器学习的实质为&#xff1a;根据现有数据,寻找输入数据和输出数据的映射关系/函数 2.机器学习的任务&#xff1a; ​ 回归&#xff1a;输出为连续值 ​ 分类&#xff1a;输出为离散值 ​ 聚类&#xff1a;无标记信息的输出(例如根据瓜的外观分为两部分) …

自动驾驶技术现状与需求分析

随着科技的不断进步和智能化浪潮的席卷&#xff0c;自动驾驶技术已成为当今交通领域的热点话题。本文旨在深入探讨自动驾驶技术的当前发展状况&#xff0c;并对其未来的市场需求进行细致分析。首先&#xff0c;我们将回顾自动驾驶技术的起源、发展历程以及当前的技术水平&#…

探秘SpringBoot默认线程池:了解其运行原理与工作方式(@Async和ThreadPoolTaskExecutor)

文章目录 文章导图Spring封装的几种线程池SpringBoot默认线程池TaskExecutionAutoConfiguration&#xff08;SpringBoot 2.1后&#xff09;主要作用优势使用场景如果没有它 2.1版本以后如何查看参数方式一&#xff1a;通过Async注解--采用ThreadPoolTaskExecutordetermineAsync…

光储充一体化平台解决方案——慧哥充电桩开源系统

慧哥充电桩开源平台 慧哥充电桩开源系统 源码下载地址https://gitee.com/chouleng/lengzicharge-cloud 光储充一体化平台解决方案 一、项目背景和目标 随着新能源汽车的普及和可再生能源的发展&#xff0c;光储充一体化平台应运而生。该平台旨在整合光伏发电、储能系统和充电…

Linux - crond任务调度、at定时任务

1 crontab 进行-定时任务的设置 1&#xff09;概述&#xff1a; 任务调度&#xff1a;是指系统在某个时间执行的特定的命令或程序。 任务调度分类&#xff1a; 系统工作&#xff1a;有些重要的工作必须周而复始地执行。如病毒扫描等个别用户工作&#xff1a;个别用户可能希…

数据库(7)——DDL表操作2

添加字段 ALTER TABLE 表名 ADD 字段名 类型 [COMMENT 注释] [约束]; 可以观察到student_information表中成功添加了名为“class”的字段。 修改字段 修改数据类型 ALTER TABLE 表名 MODIFY 字段名 新数据类型&#xff08;长度&#xff09;; 修改字段名和字段类型 ALTER TABLE…

【机器学习与实现】支持向量机SVM

目录 一、SVM (Support Vector Machine) 概述&#xff08;一&#xff09;支持向量机SVM的主要特点&#xff08;二&#xff09;支持向量与间隔最大化&#xff08;三&#xff09;线性可分/不可分&#xff08;四&#xff09;软间隔 (soft margin) 与核技巧 (kernel trick)&#xf…

[集群聊天服务器]----(九)客户端开发

接着上文的[集群聊天服务器]----(八)群组类、群组操作接口以及业务模块之创建群组&#xff0c;加入群组以及群组聊天开发&#xff0c;项目真正操作&#xff0c;还需要客户端进行相关操作的&#xff0c;接下来我们剖析客户端的实现。 main函数 客户端主要对用户输入的消息进行…

5.21数据库mySQL

服务器存储信息的能力是有限的&#xff0c;需要将信息存储在磁盘上。 存在主要是两个问题&#xff0c;就是将数据从磁盘中读出数据来&#xff0c;将数据从服务器中存储到磁盘上。 那么接下来的问题就是如何对于数据进行存储方便于进行读取&#xff0c;数据库就是起这样的作用…

C++_C++11的学习

1. 统一的列表初始化 1.1&#xff5b;&#xff5d;初始化 在C98 中&#xff0c;标准就已经允许使用花括号 {} 对数组或者结构体元素进行统一的列表初始值设定。而到了C11&#xff0c;标准扩大了用大括号括起的列表 ( 初始化列表 )的使用范围&#xff0c;使其能适用于所有的内…

Python 获取当前IP地址(爬虫代理)

Python 获取当前IP地址&#xff08;爬虫代理&#xff09; 在Python中&#xff0c;获取当前的公网IP地址通常涉及到发送一个请求到外部服务&#xff0c;因为本地IP地址通常只在你的私有网络内部是可见的&#xff0c;而公网IP地址是由你的ISP&#xff08;互联网服务提供商&#x…

J2SE+swing客户端开发进阶总结

Hello &#xff0c; 我是恒。分享一个练手项目一本糊涂账&#xff0c;顺便帮站长宣传一下站点https://how2j.cn 本项目是基于Swing和JDBC开发的图形界面桌面应用&#xff0c;通过这个项目能运用锻炼J2SE知识和技能 结构 ├───src/ │ ├───HutuMainFrame.java │ ├…

Java进阶学习笔记28——StringJoiner

Java中&#xff0c;有没有即能高效&#xff0c;又能实现更方便的拼接呢&#xff1f; StringJoiner&#xff1a; JDK8才开始的&#xff0c;跟StringBuilder一样&#xff0c;也是用来操作字符串的&#xff0c;也可以看成是一个容器&#xff0c;创建之后里面的内容是可变的。 好…

C++发票四要素真伪查验、数电票查验

在数字化转型的浪潮下&#xff0c;财务管理作为企业运营的核心环节之一&#xff0c;正经历着前所未有的变革。近期&#xff0c;随着发票查验接口技术的不断成熟与创新&#xff0c;翔云发票查验接口平台为企业提供了便捷、高效的发票查验服务&#xff0c;极大地提升了企业的财税…

SpringBoot学习小结之RocketMQ

文章目录 前言一、架构设计1.1 架构图1.2 消息1.3 工作流程 二、部署2.1 单机2.2 集群 三、Springboot Producter3.1 准备3.2 pom依赖、yml 配置3.3 普通消息3.4 顺序、批量、延迟消息3.5 事务消息 四、Springboot Consumer4.1 配置4.2 普通Push消费4.3 回复4.4 集群和广播4.5 …

CompletableFuture的使用(详细)

引入 功能和灵活性&#xff1a; Future&#xff1a;是Java 5引入的接口&#xff0c;用于表示一个异步操作的未来结果。它提供了基本的异步操作支持&#xff0c;如检查是否完成、等待结果以及获取结果&#xff0c;但在处理结果、异常和组合等方面功能有限。 CompletableFuture&a…

Linux文件操作命令

马哥教育 Linux SRE 学习笔记 文件操作命令 显示当前工作目录 每个shell和系统进程都有一个当前的工作目录 CWD&#xff1a;current work directory 显示当前shell CWD的绝对路径 pwd命令: printing working directory -P 显示真实物理路径-L 显示链接路径&#xff08;默认&…

Light_Future的C++框架的套利代码读取arbitrage_strategy.cpp

1. 套利策略的初始化函数,订阅两个数据 void arbitrage_strategy::on_init(subscriber& suber) {// 向订阅者注册两个交易代码的tick接收器。suber.regist_tick_receiver(_code1, this);suber.regist_tick_receiver(_code2, this);// 获取当前交易日。uint32_t trading_d…