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

文章目录

  • 一、前端 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
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

VS2019+Qt5.15.2 编译 QtWebEngine(带音视频解码)

前言 QtWebEngine 是 Qt 框架的一部分&#xff0c;用于构建现代 Web 浏览器功能。本篇教程将向您展示如何在 Visual Studio 2019 中编译 QtWebEngine 5.15.2 源码&#xff0c;并配置以支持音视频解码功能。 准备工作 1、源码下载 2、源码修改&#xff0c;参考Qt Code Review…

【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…

【electron】electron项目创建的方式:

文章目录 【1】npm init quick-start/electron&#xff08;推荐&#xff09;【2】 克隆仓库&#xff0c;快速启动【3】 通过脚手架搭建项目【4】 手动创建项目 【Electron官网】https://www.electronjs.org/zh/docs/latest/api/app 【1】npm init quick-start/electron&#xf…

Mysql_5.7下载安装与配置基础操作教程

目录 一、Mysql57下载与安装 二、尝试登录Mysql 三、配置Mysql环境变量 一、Mysql57下载与安装 首先&#xff0c;进入Mysql下载官网&#xff1a;MySQL Community Downloads 随后&#xff0c;选择版本5.7.43&#xff0c;系统选择Windows&#xff0c;随后下方会出现两个下载选…

又双叒叕!五大数据库全方位注释,抗性宏基因组分析项目再次升级!

基于宏基因组测序的抗性基因分析是目前ARGs分析的重要手段&#xff0c;五大数据库全面注释分析&#xff0c;一网打尽ARGs、MRGs、BRGs、MGEs、致病菌注释。 项目报告不仅包含抗性基因的多样性、丰度和分布模式&#xff0c;还能获得包括抗性组变化驱动因素、指示基因识别、抗性组…

Python爬虫:js逆向调式操作及调式中遇到debugger问题

Python爬虫:js逆向调式操作及调式中遇到debugger问题 1. 前言2. js逆向调式操作2.1 DOM事件断点2.2 XHR/提取断点(用于请求接口参数加密处理)2.3 请求返回的数据是加密的2.4 hook定位参数 3. 调式中遇到debugger问题3.1 解决方式(一律不在此处暂停)3.2 问题&#xff1a;点击一律…

企业到什么阶段需要进行数字化转型?

数字化转型并不是一个一刀切的过程&#xff0c;也不存在普遍规定企业必须在何时经历数字化转型的特定阶段。然而&#xff0c;有一些常见的触发因素或情况往往会促使企业考虑或踏上数字化转型之旅&#xff1a; 1.不断变化的商业格局&#xff1a;当企业面临客户行为、市场动态或…

【Alibaba中间件技术系列】「RocketMQ技术专题」小白专区之领略一下RocketMQ基础之最!

应一些小伙伴们的私信&#xff0c;希望可以介绍一下RocketMQ的基础&#xff0c;那么我们现在就从0开始&#xff0c;进入RocketMQ的基础学习及概念介绍&#xff0c;为学习和使用RocketMQ打好基础&#xff01; RocketMQ是一款快速地、可靠地、分布式、容易使用的消息中间件&#…

基于X86六轮差速移动机器人运动控制器设计与实现(二)规划控制算法

带输入约束的 MPC 路径跟踪控制 MPC 算法是一种基于控制对象模型的控制方法&#xff0c;其优势在于在控制中考虑了 系统的多种物理约束&#xff0c;同时基于模型与当前机器人的反馈信息预估出未来机器人 位姿信息的处理方法可以解决控制迟滞的问题。 4.1 MPC 路径跟踪控…

创建一个简单的HTML Viewer应用程序

使用wxPython和内嵌浏览器来创建一个简单的HTML Viewer应用程序。 在本篇文章中&#xff0c;我们将使用Python和wxPython模块来创建一个简单的HTML Viewer应用程序。这个应用程序可以让用户输入HTML内容&#xff0c;并在内嵌浏览器中显示该内容的效果。 准备工作 在开始之前…

C# API 文档注释规范

C# API 文档注释规范 1. 命名空间注释(namespace)2. summary3. remarks and para4. param5. returns6. example and code7. exception8. typeparam 最近在开发工作中需要实现 API 帮助文档&#xff0c;如果根据所写的代码直接重写 API 帮助文档将会是意见非常大的工作量&#x…

无代码集成飞书连接更多应用

场景描述&#xff1a; 基于飞书开放平台能力&#xff0c;无代码集成飞书连接更多应用&#xff0c;打通数据孤岛。通过Aboter可轻松搭建业务自动化流程&#xff0c;实现多个应用之间的数据连接。 支持包括飞书事件监听和接口调用的能力&#xff1a; 事件监听&#xff1a; 用…

Python Web开发 Django 简介

今天来为大家介绍 Python 另一个 Web 开发框架 Django&#xff0c;它是一个基于 Python 定制的开源 Web 应用框架&#xff0c;最早源于一个在线新闻 Web 网站&#xff0c;后于2005年开源。Django 的功能大而全&#xff0c;它提供的一站式解决的思路&#xff0c;能让开发者不用在…

.NET Core6.0使用NPOI导入导出Excel

一、使用NPOI导出Excel //引入NPOI包 HTML <input type"button" class"layui-btn layui-btn-blue2 layui-btn-sm" id"ExportExcel" onclick"ExportExcel()" value"导出" />JS //导出Excelfunction ExportExcel() {…

【Hyper-V】Windows11 家庭版怎么启用虚拟机Hyper-V

在电脑Windows11系统上启用虚拟机Hyper-V&#xff0c;打开 启用和关闭WIndows功能&#xff0c;找到其中一项Hyper-V&#xff0c;对于家庭版的系统用户来说&#xff0c;这个选项是没有的&#xff0c;接下来讲一讲怎么开启。 安装Hyper-V 创建一个文件名为Hyper-v.bat&#xff…

在思科(Cisco)路由器中使用 SNMP

什么是SNMP SNMP&#xff0c;称为简单网络管理协议&#xff0c;被发现可以解决具有复杂网络设备的复杂网络环境&#xff0c;SNMP 使用标准化协议来查询网络上的设备&#xff0c;为网络管理员提供保持网络环境稳定和远离停机所需的重要信息。 为什么要在思科设备中启用SNMP S…

深入Redis线程模型

目录 1.前言 2.Redis为什么快&#xff1f; 3.Redis 为何选择单线程&#xff1f; 3.1可维护性 3.2并发处理 3.3性能瓶颈 4.Reactor设计模式 5.Redis4.0前 单线程模型 - Event Loop 6.Redis4.0后 多线程异步任务 7.Redis6.0后 多线程网络模型 1.前言 这篇文章我们主要围绕…

springBoot 简单的demo

springBoot 学习开始 场景开发流程1、创建项目2、导入依赖3、创建启动springBoot 项目的主入口程序4、创建业务程序5、在MainApplication文件运行程序6、将文件打包成jar包 遇到的问题未解决 希望大哥们帮忙--本地运行jar包报错 场景 浏览器发送hello请求&#xff0c;返回“he…

生成硬件报告

生成硬件报告 创建一个名为 /home/curtis/ansible/hwreport.yml 的 playbook &#xff0c;它将在所有受管节点上生成含有以下信息的输出文件 /root/hwreport.txt &#xff1a; 清单主机名称 以 MB 表示的总内存大小 BIOS 版本 磁盘设备 vda 的大小 磁盘设备 vdb 的大小 输出文件…

20款美规奔驰GLS450更换AMG GLS63原厂刹车卡钳,刹车效果强悍无比

对于M.Benz的车迷来说&#xff0c;AMG必定是他们的圣物&#xff0c;经过AMG改装的成品无一不是拥有动力强横&#xff0c;目操控性、舒适性都能够兼备的。下面所介绍的这套制动系统&#xff0c;便是由AMG出品的大六活塞卡钳及大直径开孔刹车碟&#xff0c;所组成的制动套件。