React项目，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设置为 true
      setOpenFileDialog(true)

      // 保证点击前，openFileDialog已经被设置为 true（这一步很关键，不然会有 bug，大家可以把这一行注释了自己试一下）
      setTimeout(() => {
        uploadButtonRef.current?.click() 
      }, 50)														
    } else {
      // 未登录，直接弹出登录弹框
      user.loginEvent()
      return
    }					
  }
}

const handleUploadFile = async (file: any) => {
  console.log("文件上传时可以做一下处理")
}
  
<div onClick={checkStatus}>
  <Upload.Dragger
    beforeUpload={handleUploadFile} 
    openFileDialogOnClick={openFileDialog}
  >	
    <Image
      src={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>