antd vue Ant Design Vue Upload图片上传组件 beforeUpload不能阻止上传行为

原创于 2022-11-14 16:01:23 发布 · 3.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #前端框架 #anti-design-vue

前端专栏收录该内容

21 篇文章

订阅专栏

博客详细讨论了AntDesignVue的Upload组件中beforeUpload钩子函数无法有效阻止文件上传的问题。根据官方文档，返回false应阻止上传，但实际上需要返回一个Promise并 resolve(false) 才能实现。作者提供了示例代码，展示了如何正确阻止上传并进行文件格式和大小验证。在示例中，只有当文件格式正确且大小不超过限制时，才会允许上传并更新fileList。

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

解决antd vue upload组件 beforeUpload不能阻止上传的行为

Ant Design Vue网站给出的描述

Ant Design Vue网站给出的描述

网页地址：Upload
在这里插入图片描述

这里描述说可以直接返回false 阻止文件上传，但其实并不能阻止，经过一番尝试后
请注意查看我的示例：

const beforeUpload = async (file: UploadFile<unknown>): Promise<boolean> => {
  // 坑：必须要返回一个 Promise，promise 中 必须返回false 才能阻止上传，通过校验必须返回true和 resolve 否则会阻止上传
  return new Promise((resolve) => {
    const { supportFileType, maxSize, aspectUnit } = props;
    const { size = 0, name = "" } = file || {};

    if (!isFormatValidate(name, supportFileType)) {
      message.error("请上传支持的文件格式!");
      return false;
    }

    const isSizeValidate: boolean = size <= maxSize; // 文件大小判断
    if (!isSizeValidate) {
      const msg = `文件最大不超过${getSizeByByte(maxSize, aspectUnit)}`;
      message.error(msg);
      console.log("msg", msg);
      return false;
    }
    fileList.value = [...fileList.value, file];
    resolve(true);
    return true;
  });
};