Vue 根据Upload组件的before-upload方法,限制用户上传文件的类型及大小

news2024/12/24 4:48:17

文章目录

  • 一、前端 Vue `Upload`组件的`before-upload`方法
  • 二,使用方法


请添加图片描述

一、前端 Vue Upload组件的before-upload方法

判断用户上传的文件是否符合要求,可以根据文件类型或者大小做出限制。

文件类型
docapplication/msword
docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
xlsapplication/vnd.ms-excel
xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
txttext/plain
pdfapplication/pdf
zipapplication/x-zip-compressed
exeapplication/x-msdownload

二,使用方法

用file.type判断上面的文件类型就可以了,也可以根据文件的大小做限制。

    beforeFileUpload (file) {
      console.log(file.type, '文件上传之前钩子')
      const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type === 'application/pdf' || file.type === 'application/msword'
      if (!isJPG) {
        this.$Message.error('只能上传 xls、xlsx、doc、docx、pdf 格式的文件')
        return false
      }
      const isLt30M = file.size / 1024 / 1024 < 30
      if (!isLt30M) {
        this.$Message.error('文件大小不能超过 30MB')
        return false
      }
      return true
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/891487.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker基础入门:常规软件安装与镜像加载原理

Docker基础入门&#xff1a;常规软件安装与镜像加载原理 一、Docker常规软件安装1.1、部署nginx1.2、部署tomcat1.3、部署elasticsearch1.4、如何部署kibana-->连接elasticsearch1.5、部署可视化工具 二、 镜像加载原理2.1、镜像是什么2.2、Docker镜像加速原理2.3、分层理解…

【Python程序设计】基于Python Flask 机器学习的全国+上海气象数据采集预测可视化系统-附下载链接以及详细论文报告,原创项目其他均为抄袭

基于Python Flask 机器学习的全国上海气象数据采集预测可视化系统 一、项目简介二、开发环境三、项目技术四、功能结构五、运行截图六、功能实现七、数据库设计八、源码下载地址 一、项目简介 在信息科技蓬勃发展的当代&#xff0c;我们推出了一款基于Python Flask的全国上海气…

什么是合成数据(Synthetic Data)?

关于合成数据您需要知道的一切 推出人工智能&#xff08;AI&#xff09;的企业在为其模型采集足够的数据方面会遇到一个主要障碍。对于许多用例来说&#xff0c;正确的数据根本不可用&#xff0c;或者获取数据非常困难且成本高昂。在创建AI模型时&#xff0c;数据缺失或不完整…

哨兵1号处理流程

分步步骤 1.打开.mainsafe文件 2.轨道校正&#xff1a;Radar—>Apply Orbit File&#xff0c;勾上Do not fail 3.热噪声去除&#xff1a;Radar—>Radiometric—>S-1 Thermal Noise 4.辐射定标&#xff1a;Radar—>Radiometric—>Calibrate &#xff08;只选outp…

day20 飞机大战射击游戏

有飞行物类 飞行 爆炸 的连环画&#xff0c; 飞行的背景图 &#xff0c; 子弹图&#xff0c; 还有游戏开始 暂停 结束 的画面图。 设计一个飞机大战的小游戏&#xff0c; 玩家用鼠标操作hero飞行机&#xff0c; 射出子弹杀死敌机&#xff0c;小蜜蜂。 敌机可以获得分数&…

Vue2集成Echarts实现可视化图表

一、依赖配置 1、引入echarts相关依赖 也可以卸载原有的&#xff0c;重新安装 卸载&#xff1a;npm uninstall echarts --save 安装&#xff1a;npm install echarts4.8.0 --save 引入水球图形依赖 npm install echarts-liquidfill2.0.2 --save 水球图可参考文档&#xff1…

【Python】使用python解析someip报文,以someip格式打印报文

文章目录 1.安装scapy库2.示例 1.安装scapy库 使用 pip 安装 scapy 第三方库&#xff0c;打开 cmd&#xff0c;输入以下命令&#xff1a; pip install scapy出现如图所示&#xff0c;表示安装成功&#xff1a; 2.示例 要解析someip格式报文&#xff0c;需要导入someip模块&a…

rabbitmq的死信队列

目录 成为死信的条件 消息TTL过期 队列达到最大长度 消息被拒 延迟队列 延迟队列使用场景 消息设置 TTL 队列设置 TTL 两者区别 producer 将消息投递到 broker 或者直接到 queue 里了&#xff0c; consumer 从 queue 取出消息 进行消费&#xff0c;但某些时候由…

汇聚产学合力二十载,2023英特尔学术大会在南京开幕

8月16日&#xff0c;以“合聚创 共IN智能时代”为主题的“2023英特尔&#xff08;中国&#xff09;学术大会”在南京开幕&#xff0c;邀请专家学者共话科技界前沿趋势&#xff0c;展示科研成果和技术解决方案。本次大会延续了英特尔“为智能而聚能”&#xff0c;推动中国产业界…

ShowMeBug CEO李亚飞受邀出席ArchSummit 全球架构师峰会

2023年7月21-22日&#xff0c;极客邦科技旗下InfoQ中国举办的ArchSummit 全球架构师峰会&#xff08;深圳站&#xff09;2023 在深圳顺利召开。本次会议&#xff0c;聚集了国内外数百位架构师专家来分享技术内容&#xff0c;像MySQL之父、科大讯飞涵盖语言大模型、AIGC、可观测…

214、仿真-基于51单片机温度甲醛一氧化碳(co)电机净化报警Proteus仿真设计(程序+Proteus仿真+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、程序源码 资料包括&#xff1a; 需要完整的资料可以点击下面的名片加下我&#xff0c;找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选择 方案一&a…

Spring系列七:声明式事务

&#x1f418;声明式事务 和AOP有密切的联系, 是AOP的一个实际的应用. &#x1f432;事务分类简述 ●分类 1.编程式事务: 示意代码, 传统方式 Connection connection JdbcUtils.getConnection(); try { //1.先设置事务不要自动提交 connection.setAutoCommit(false…

【数理知识】向量与基的内积,Matlab 代码验证

序号内容1【数理知识】向量的坐标基表示法&#xff0c;Matlab 代码验证2【数理知识】向量与基的内积&#xff0c;Matlab 代码验证 文章目录 1. 向量与基的内积2. 二维平面向量举例3. 代码验证Ref 1. 向量与基的内积 假设存在一个二维平面内的向量 a ⃗ \vec{a} a &#xff0c…

复旦微FR0触摸原理(1)

传统的家电产品通常使用物理按键来进行操作&#xff0c;但随着科技的不断进步&#xff0c;越来越多的家电产品开始采用触摸屏幕和触摸按键来提供更加智能化和便捷的操作方式。 本篇介绍复旦微FM33FR026的触摸检测原理 TSI 模块使用自电容的 方法来检测触摸行为。 自电容检测的原…

半导体退火那些事(1)

1.半导体退火的原理 半导体材料在晶体生长和制造过程中&#xff0c;由于各种原因会出现缺陷、杂质、位错等结构性缺陷&#xff0c;导致晶格不完整&#xff0c;施加电场后的电导率较低。通过退火处理&#xff0c;可以使材料得到修复&#xff0c;结晶体内部重新排列&#xff0c;…

day22 API文档 第一个元素File

file的绝对路径 file的相对路径 file路径的写法 file的各种方法 File.separator 解决虚拟机和windows路径中的斜杠问题 lambda怎么写 file1 file2 file3 file4 public class FileDemo04 {public static void main(String[] args) {File file new File(".");File…

shell连接ubuntu

当使用aws的私钥连接时,老是弹出输入私钥密码,但是根本没有设置过密码,随便输入后,又提示该私钥无密码... 很早就使用过aws的ubuntu,这个问题也很早就遇到过,但是每次遇到都要各种找找找...索性这次记下来算了 此处用FinalShell连接为例 首先现在Putty连接工具: 点击官方下载 …

uploadifive php上传进度条插件 解决动态传参数问题

uploadifive默认只能在加载时,静态传递参数.如果想让用户输入参数.再动态读取.传到后端,是没有直接的办法的 效果图 但我们可以通过settings.formData 来修改配置的方式传参数,完整演示 <form id"file_form{$v.id}" style"display:none"><hr/>…

四川玖璨电商:新媒体短视频运营是做什么?

随着互联网科技的不断发展&#xff0c;新媒体行业如今已经成为了人们获取信息、进行交流的主要渠道之一。在这样的大环境下&#xff0c;短视频成为了新媒体运营的一个重要组成部分。那么&#xff0c;新媒体短视频运营到底是做什么呢&#xff1f;接下来&#xff0c;小编将从几个…

查看 Linux 内核版本的几种方法

uname -a uname -srm uname -r 分拆&#xff1a;Linux 5.13.0-19-generic x86 64 5-内核版本 13-主修订版本 0-19 -次要修订版本 过查看 /proc/version 文件确认 /proc 目录包含虚拟文件&#xff0c;其中包含有关系统内存&#xff0c;CPU内核&#xff0c;已安装文件系统等的信…