Arco Upload组件如何自定义上传前文件类型和大小校验？

皇甫爱菊提问于 2026-01-28 01:21:29 阅读 67

组件

在用Arco的Upload组件做文件上传时，想自定义校验图片类型和最大5MB限制。按照文档写了beforeUpload钩子，但上传超过大小的文件时提示还是没生效，控制台报错”Unexpected token”，这是哪里出问题了？

代码这样写的：beforeUpload={(file) => { if(!/.(jpg|jpeg|png)$/.test(file.name)) return Promise.reject('格式不对') }}，但没处理文件大小，应该加if(file.size > 5*1024*1024) return false吗？


const uploadProps = {
  beforeUpload: (file) => {
    const isJpgOrPng = file.type.startsWith('image/')
    const isLt2M = file.size / 1024 / 1024 < 5
    if (!isJpgOrPng) {
      message.error('只能上传图片文件！')
      return false
    }
    if (!isLt2M) {
      message.error('图片大小不能超过5MB!')
      return false
    }
    return true
  },
}

但测试时上传了10MB的jpg文件，依然触发了上传动作，这是配置位置不对吗？文档里说要配合showUploadList使用？

Upload上传

我来解答赞 10 收藏

反馈

2 条解答

铭轩的笔记 Lv1

你的思路是对的，但在Arco Design的Upload组件中，beforeUpload的返回值处理需要特别注意。直接返回false并不会阻止文件上传，组件内部可能将其视为无效值而继续执行默认行为。正确的做法是返回一个被拒绝的Promise（Promise.reject），或者返回一个带有error的对象。

此外，关于文件大小的判断逻辑，file.size的单位是字节，所以判断大于5MB的时候，应该是file.size > 5 1024 1024。

下面是修改后的代码示例：

const uploadProps = {

  beforeUpload: (file) => {

    // 校验文件类型是否为图片

    const isImage = file.type.startsWith('image/');

    // 校验文件大小是否小于等于5MB

    const isValidSize = file.size <= 5  1024  1024;



    if (!isImage) {

      message.error('只能上传图片文件！');

      // 返回Promise.reject来阻止上传

      return Promise.reject(new Error('文件类型不正确'));

    }



    if (!isValidSize) {

      message.error('图片大小不能超过5MB!');

      return Promise.reject(new Error('文件大小不合法'));

    }



    // 校验通过，返回true继续上传流程

    return true;

  },

};

你提到控制台报错"Unexpected token"，这可能是因为你代码中存在未处理的特殊字符或语法错误。检查一下代码中是否存在非法字符，比如文件名正则中的反斜杠是否正确处理。

关于你提到的showUploadList属性，它并不会影响beforeUpload的行为，它主要用于控制是否显示上传文件列表。

测试的时候可以尝试上传一个非法类型的文件或超过大小限制的文件，看看是否能够正确触发错误提示并阻止上传动作。如果还是有问题，建议打印一下file对象，确认里面的name和size属性是否符合预期。

2026-02-06 07:05

轩辕洋泽 Lv1

你这问题出在返回值上，beforeUpload 必须返回一个 Promise 才能正确阻断上传。直接这样：

const uploadProps = {

  beforeUpload: (file) => {

    const isJpgOrPng = file.type.startsWith('image/')

    const isLt2M = file.size / 1024 / 1024 < 5

    if (!isJpgOrPng) {

      message.error('只能上传图片文件！')

      return Promise.reject(new Error('只能上传图片文件！'))

    }

    if (!isLt2M) {

      message.error('图片大小不能超过5MB!')

      return Promise.reject(new Error('图片大小不能超过5MB!'))

    }

    return Promise.resolve(file)

  },

}

文档里说的没错，确实得配合 showUploadList 使用，但你主要问题是返回值不对。

2026-01-28 20:00