使用ant-design 上传文件组件Upload时的beforeUpload返回false，文件仍然上传的问题

最新推荐文章于 2025-06-23 09:40:44 发布

原创最新推荐文章于 2025-06-23 09:40:44 发布 · 1.6w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#antDesign #Upload #beforeUpload

js 专栏收录该内容

34 篇文章

订阅专栏

本文深入探讨了在使用Upload组件时遇到的常见问题，特别是如何通过返回Promise来控制文件上传流程，确保只有符合条件的文件才能上传，有效避免了不必要的上传尝试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Upload这个组件的时候，我们会发现它其实又许多的小坑坑。
如果我们在beforeUpload中直接返回true或者是false，那么它其实也是会上传文件的，因为它也会触发onChange函数。
我这里是采用在对应的函数中返回一个promise来解决的，就像下面这样：

export function checkBeforeFileUpload(file){
  return new Promise((resolve, reject) => {
    let fileName = file.name;
    //截取文件名
    let pointPos = fileName.indexOf('.');
    fileName = fileName.substring(0, pointPos);
    //判断文件是否符合正则表达式的规则
    if (!fileNameRegular.reg.test(fileName)) {
      message.error(fileNameRegular.msg);
      return reject(false)
    }
    return resolve(true);

  });
}

这样在不满足条件的情况下，它就不会上传文件啦