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

本文主要是介绍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>