VUE限制文件上传大小和上传格式

<el-form-item label="图片:" prop="tempImagePath"><el-uploadclass="upload"accept="image/jpeg":show-file-list="false"list-type="picture-card":headers="{ token: token}":action="actionUrl":before-upload="beforeAvatarUpload":on-success="handleAvatarSuccess"><img v-if="temp.tempImagePath":src="temp.tempImagePath" width="146px" height="146px"/><i v-else class="el-icon-plus"></i><div slot="tip" class="el-upload__tip">只能上传.gif/.jpeg/.png文件且小于500K</div></el-upload>
</el-form-item>

 注释:

beforeAvatarUpload (file) {const imgType = file.type === 'image/jpeg' || file.type === 'image/png'const isLt500k = file.size / 1024 / 1024 < 0.48;if (!imgType) {this.$message.error("上传图片只能是 JPG和png 格式!");return false;}if (!isLt500k) {this.$message.error("上传图片大小不能超过 500k!");return false;}
},

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

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

相关文章

linux的netstat命令和ss命令

1. 网络状态 State状态LISTENING监听中&#xff0c;服务端需要打开一个socket进行监听&#xff0c;侦听来自远方TCP端口的连接请求ESTABLISHED已连接&#xff0c;代表一个打开的连接&#xff0c;双方可以进行或已经在数据交互了SYN_SENT客户端通过应用程序调用connect发送一个…

人力资源管理后台 === 基础环境+登陆

目录 1.人力资源项目介绍 1.1 项目架构和解决方案 1.2 课程安排 1.3 课程具备能力 1.4 课程地址 2. 拉取项目基础代码 3.项目目录和入口文件介绍 4.App.vue根组件解析 5.基础设置settings.js和导航守卫permission.js 6.Vuex的结构 7.使用模板中的Icon图标 8.扩展…

最新世界银行WDI面板数据(1960-2022年)

The World Development Indicators 是由世界银行编制和发布的全面数据集&#xff0c;旨在提供全球发展的详尽统计信息。这份数据集收录了1960-2022年间&#xff0c;世界266个国家共计1477个指标&#xff0c;涵盖经济、社会、环境、教育、公共卫生等20个领域 一、数据介绍 数据…

android项目之fragement+navigation实现的底部导航栏

目标 我们常见的app&#xff0c;都有底部导航栏&#xff0c;今天我们采用fragementnavition来实现&#xff0c;当然换有其他的方案来也能实现&#xff0c;看自己的爱好。 步骤 1. Activity的布局文件&#xff08;activity_main.xml&#xff09; <androidx.coordinatorla…

chromium通信系统-mojo系统(一)-ipcz系统代码实现-同Node通信

在chromium通信系统-mojo系统(一)-ipcz系统基本概念一文中我们介绍了ipcz的基本概念。 本章我们来通过代码分析它的实现。 handle系统 为了不对上层api暴露太多细节&#xff0c;实现解耦&#xff0c;也方便于传输&#xff0c;ipcz系统使用handle表示一个对象&#xff0c;hand…

MySQL基本SQL语句(下)

MySQL基本SQL语句&#xff08;下&#xff09; 一、扩展常见的数据类型 1、回顾数据表的创建语法 基本语法&#xff1a; mysql> create table 数据表名称(字段名称1 字段类型 字段约束,字段名称2 字段类型 字段约束,...primary key(主键字段 > 不能为空、必须唯一) ) …

WebSocket协议测试实战

当涉及到WebSocket协议测试时&#xff0c;有几个关键方面需要考虑。在本文中&#xff0c;我们将探讨如何使用Python编写WebSocket测试&#xff0c;并使用一些常见的工具和库来简化测试过程。 1、什么是WebSocket协议&#xff1f; WebSocket是一种在客户端和服务器之间提供双向…

KubeVela核心控制器原理浅析

前言 在学习 KubeVela 的核心控制器之前&#xff0c;我们先简单了解一下 KubeVela 的相关知识。 KubeVela 本身是一个应用交付与管理控制平面&#xff0c;它架在 Kubernetes 集群、云平台等基础设施之上&#xff0c;通过开放应用模型来对组件、云服务、运维能力、交付工作流进…

4G模块(EC600N)通过MQTT连接华为云

目录 一、前言 二、EC600N模块使用 1&#xff0e;透传模式 2&#xff0e;非透传模式 3、华为云的MQTT使用教程&#xff1a; 三、具体连接步骤 1、初始化检测 2、打开MQTT客户端网络 3、创建产品 4、创建模型 5、注册设备 6、连接客户端到MQTT服务器 7、发布主题消…

Redis面试题:Redis的数据过期策略有哪些?

目录 面试官&#xff1a;Redis的数据过期策略有哪些 ? 惰性删除 定期删除 面试官&#xff1a;Redis的数据过期策略有哪些 ? 候选人&#xff1a; 嗯~&#xff0c;在redis中提供了两种数据过期删除策略 第一种是惰性删除&#xff0c;在设置该key过期时间后&#xff0c;我们…

Stm32CubeMx生成代码提示缺少“core_cm3.h“

Stm32CubeMx生成代码提示缺少"core_cm3.h" 1.原因分析 1.1问题根源 在我们使用本地解压的方法去安装固件包,但是找错了要下载的固件包&#x1f60a;.在你点击进入下载页面之后,能看到一共有两个下载链接,其中上面的是补丁包,而第二个才是我们应该要下载的固件包 当…

【Web-Note】 JavaScript概述

JavaSript基本语法 JavaSript程序不能独立运行&#xff0c;必须依赖于HTML文件。 <script type "text/javascript" [src "外部文件"]> JS语句块; </script> script标记是成对标记。 type属性&#xff1a;说明脚本的类型。 "text/jav…

王者农药小游戏

游戏运行如下&#xff1a; sxt Background package sxt;import java.awt.*; //背景类 public class Background extends GameObject{public Background(GameFrame gameFrame) {super(gameFrame);}Image bg Toolkit.getDefaultToolkit().getImage("C:\\Users\\24465\\D…

c++ 重写 多态

1 重写(继承后(拼接基类后)) 1.1 非虚函数 同名成员函数 (各自有一个xFunction() 内存 ) #include <iostream> #include <String> class BaseClass { public:void xFunction() {std::cout << "BaseClass::xFunction()\n"; } };class Subclass1 …

Python武器库开发-前端篇之JavaScript介绍(三十三)

前端篇之JavaScript介绍(三十三) JavaScript简介 JavaScript是一种脚本语言&#xff0c;用于为网站和应用程序提供交互性和动态性。它是一种高级编程语言&#xff0c;可用于创建各种功能&#xff0c;包括网页表单验证、动态效果、图形交互、应用程序开发等。由于JavaScript是…

计算机应用基础_错题集_Internet应用1---网络教育统考工作笔记004

5、下面关于搜索引擎的说法,不正确的是____。 A.搜索引擎既是用于检索的软件,又是提供查询﹑检索的网站 B.搜索引擎按其工作方式分为两类:全文搜索引擎和基于关键词的搜索引擎 C.现在很多搜索引擎提供网页快照的功能,当这个网页被删除或链接失效时,用户仍可使用网页快照…

【数据分享】我国12.5米分辨率的坡向数据(免费获取)

地形数据&#xff0c;也叫DEM数据&#xff0c;是我们在各项研究中最常使用的数据之一。之前我们分享过源于NASA地球科学数据网站发布的12.5米分辨率DEM地形数据&#xff01;基于该数据我们处理得到12.5米分辨率的坡度数据、12.5米分辨率的山体阴影数据&#xff08;均可查看之前…

C 文件 rewind() 函数

C 文件 rewind() 函数 rewind()函数将文件指针设置在流的开头。如果必须多次使用流&#xff0c;这很有用。 语法&#xff1a; void rewind(FILE *stream)文件&#xff1a;file.txt this is a simple text程序&#xff1a;rewind.c 示例 #include<stdio.h> #inclu…

【Hadoop】分布式文件系统 HDFS

目录 一、介绍二、HDFS设计原理2.1 HDFS 架构2.2 数据复制复制的实现原理 三、HDFS的特点四、图解HDFS存储原理1. 写过程2. 读过程3. HDFS故障类型和其检测方法故障类型和其检测方法读写故障的处理DataNode 故障处理副本布局策略 一、介绍 HDFS &#xff08;Hadoop Distribute…

Linux的基本指令(三)

目录 前言 echo指令&#xff08;简述&#xff09; Linux的设计理念 输出重定向操作符 > 追加输出重定向操作符 >> 输入重定向操作符 < 补充知识 学前补充 more指令 less指令 head指令 tail指令 查看文件中间的内容 利用输出重定向实现 利用管道“ |…