限制el-upload组件的上传文件大小

限制el-upload组件的上传文件大小

<el-upload :before-upload="handleBeforeUpload">
  <!-- 其他组件内容 -->
</el-upload>

Vue实例中定义handleBeforeUpload方法来进行文件大小的验证。你可以使用file.size属性来获取文件的大小,并与你期望的大小进行比较。如果文件大小超过了你的限制,你可以返回false来阻止文件上传,或者返回一个带有错误信息的字符串,以便在界面上显示错误信息。

const handleBeforeUpload = (file) => {
  const maxSize = 10 * 1024 * 1024; // 10MB,根据你的需求设置最大文件大小
  if (file.size > maxSize) {
    ElMessage({
      message: `文件大小超过了${maxSize / (1024 * 1024)}MB的限制`,
      type: 'warning'
    });
    return false;
  }
};

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-30 09:22:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-30 09:22:02       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-30 09:22:02       82 阅读
  4. Python语言-面向对象

    2023-12-30 09:22:02       91 阅读

热门阅读

  1. ffmpeg与SDL结合使用

    2023-12-30 09:22:02       55 阅读
  2. 随笔 | 写在年末冬日的夜里

    2023-12-30 09:22:02       56 阅读
  3. LeetCode 23 合并 K 个升序链表

    2023-12-30 09:22:02       60 阅读
  4. 使用ChatGPT进行论文润色:智能化的写作助手

    2023-12-30 09:22:02       79 阅读
  5. 第三章 使用$ZF(-100)运行程序或系统命令

    2023-12-30 09:22:02       54 阅读
  6. 解释git的基本概念和使用方式

    2023-12-30 09:22:02       51 阅读
  7. 记录一次云服务器使用docker搭建kafka的过程

    2023-12-30 09:22:02       65 阅读
  8. golang第七卷---go中的数据结构

    2023-12-30 09:22:02       63 阅读
  9. K8s是什么?k8s应用场景是什么?

    2023-12-30 09:22:02       44 阅读
  10. 先序+中序还原二叉树【数据结构】

    2023-12-30 09:22:02       65 阅读
  11. 编程笔记 html5&css&js 012 HTML分块

    2023-12-30 09:22:02       52 阅读
  12. tcp 为什么要三次握手,两次不行吗?为什么?

    2023-12-30 09:22:02       59 阅读
  13. 【C#与Redis】--高级主题--Redis 管道

    2023-12-30 09:22:02       47 阅读
  14. VsCode的介绍和入门详细讲解

    2023-12-30 09:22:02       65 阅读
  15. 7天玩转 Golang 标准库之 http/net

    2023-12-30 09:22:02       46 阅读