结合el-upload上传组件,验证文件格式及大小
结合el-upload上传组件,验证文件格式及大小
效果如下:

代码如下:
upgradeFirmwareInfo.vue页面
<template><div><el-dialog title="新增固件升级包" :visible.sync="dialogFormVisible"top="7vh" width="760px"class="commonDialog" :close-on-click-modal="false"><el-form :model="firmwareUpgradePackForm" :rules="rules" ref="firmwareUpgradePackForm"><el-form-item prop="fileUrl" class="m-l15"><el-upload:limit="1"ref="upload"action:on-preview="handlePreview":on-remove="handleRemove":on-change="handleChange":file-list="selectedFileList":on-exceed="handleExceed":auto-upload="false"> <el-button slot="trigger" class="btn-rectangle btn-darkGreen">上传文件</el-button><el-tooltip class="item m-r10" effect="dark" placement="right"><div slot="content">注意:只能上传一个文件,文件大小不能超过2G,且文件格式必须为zip或bin</div><i class="el-icon-question el-icon--right stateDesRed font-16"></i></el-tooltip></el-upload></el-form-item><el-form-item prop="fileSize" label="固件大小" :label-width="formLabelWidth"><div class="f-r"><el-input v-model="firmwareUpgradePackForm.fileSize" autocomplete="off" :disabled="true"></el-input><span class="m-l2">{{firmwareUpgradePackForm.fileSizeUnit}}</span></div></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button class="btn-rectangle btn-darkGreen" @click="submitAddForm('firmwareUpgradePackForm')">确定</el-button><el-button class="btn-rectangle btn-grey" @click="cancelForm()">取消</el-button></div></el-dialog></div>
</template><script>
import Consts from "../../../../../public/constants/commonConsts";
export default {components: {},data() {let validateFileUrl = (rule, value, callback) => {if (this.selectedFileList.length<=0) {callback(new Error("请上传文件"));}else {callback();}};return {dialogFormVisible: true,firmwareUpgradePackForm: {fileSize:null,fileSizeUnit:"B",fileUrl:""},rules: {fileSize:[{ required: true, message:"请输入固件大小", trigger: "blur"}],fileUrl: [{ min: 1, max: 1000, message: "最多只能输入1000个字符", trigger: "blur" },{ required: true, validator: validateFileUrl, trigger: "blur" }]},formLabelWidth:"90px",selectedFileList: [],fileContent:'',}},mounted() {},methods: {//选取文件handleChange(file, fileList) {console.log(file);console.log(fileList);//验证文件类型let fileTypeLimitList = ["zip","bin"];let verifyFormatValue = Consts.verifyFileFormat(file.raw, fileTypeLimitList);if(!verifyFormatValue){this.selectedFileList = [];this.fileContent = "";return false;}//验证文件大小let verifySizeValue_zero = Consts.verifyFileSize_zero(file.raw);if(!verifySizeValue_zero){this.selectedFileList = [];this.fileContent = "";return false;}let verifySizeValue = Consts.verifyFileSize(file.raw, 2,"G");if(!verifySizeValue){this.selectedFileList = [];this.fileContent = "";return false;}this.fileContent = "";this.selectedFileList = [];this.fileContent = file.raw;},//当上传的升级包超出个数限制时钩子函数handleExceed(files, fileList) {console.log(files);console.log(fileList);console.log(this.selectedFileList);let newFile = files[0];//验证文件类型let fileTypeLimitList = ["zip","bin"];let verifyFormatValue = Consts.verifyFileFormat(newFile, fileTypeLimitList);if(!verifyFormatValue){this.selectedFileList = [];this.fileContent = "";return false;}//验证文件大小let verifySizeValue_zero = Consts.verifyFileSize_zero(newFile);if(!verifySizeValue_zero){this.selectedFileList = [];this.fileContent = "";return false;}let verifySizeValue = Consts.verifyFileSize(newFile, 2,"G");if(!verifySizeValue){this.selectedFileList = [];this.fileContent = "";return false;}this.fileContent = "";this.selectedFileList = [];this.fileContent = newFile;},//移除上传文件包handleRemove(file, fileList) {this.fileContent = "";this.selectedFileList = [];this.firmwareUpgradePackForm.fileSize = null;this.firmwareUpgradePackForm.fileSizeUnit = "B";this.firmwareUpgradePackForm.fileUrl = "";},//点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据,类似查看文件具体内容(暂时未使用)handlePreview(file) {console.log(file);},//保存新增固件升级包submitAddForm(formName) {this.$refs[formName].validate(async valid => {if (valid) {//可根据自己的需求继续往下...} else {console.log("error submit!!");return false;}});},cancelForm(){this.dialogFormVisible = false;}}
}
</script><style lang='less' scoped></style>
引入的commonConsts.js
export default class Consts {/*** 验证上传附件大小(支持G、M、K、B)* @param file* @param maxSize* @param unit* @return*/static verifyFileSize(file, maxSize, unit) {let limitResult = false;if(unit=="G"){limitResult = file.size / 1024 / 1024/ 1024 < maxSize;}if(unit=="M"){limitResult = file.size / 1024 / 1024 < maxSize;}if(unit=="K"){limitResult = file.size / 1024 < maxSize;}if(unit=="B"){limitResult = file.size < maxSize;}if (!limitResult) {Message({message: '上传文件大小不能超过'+maxSize+unit,type: 'error'})return false;}else{return true;}};/*** 验证上传附件大小为0* @param file* @return*/static verifyFileSize_zero(file) {if (file.size == 0) {Message({message: "上传文件大小为0",type: 'error'})return false;}else{return true;}};/*** 验证上传附件格式* @param file* @param fileTypeLimitList* @return*/static verifyFileFormat(file, fileTypeLimitList) {let fileNameList = file.name.split('.'); let lastIndex = fileNameList.length - 1;let currentFilType = fileNameList[lastIndex].toLowerCase();let findResult = fileTypeLimitList.find(item => item === currentFilType);if(findResult == undefined){let tip = "";fileTypeLimitList.forEach((item,index) => {if(index == 0){tip = item;}else{tip = tip + "、" +item;}});Message({message: '上传文件只能是'+tip+'格式',type: 'error'})return false;}else{return true;}};
}
如有漏洞,欢迎宝子互动指教!!!!!!!!!!!!!
相关文章:
结合el-upload上传组件,验证文件格式及大小
结合el-upload上传组件,验证文件格式及大小 效果如下: 代码如下: upgradeFirmwareInfo.vue页面 <template><div><el-dialog title"新增固件升级包" :visible.sync"dialogFormVisible"top"7vh&qu…...
配置php-fpm服务
nginx(unix domain socket方式) server {listen 80;#root /test/php/publiclocation / {#URL重写 例如隐藏index.phpif (!-f $request_filename) {rewrite ^(.*)$ /index.php?s/$1 last;break;}}location ~ [^/]\.php(/|$) {#try_files $uri 404;fastcgi_index index.php;…...
科普文:Linux系统安全加固指南
本指南仅关注安全性和隐私性,而不关注性能,可用性或其他内容。 列出的所有命令都将需要root特权。以“$”符号开头的单词表示一个变量,不同终端之间可能会有所不同。 选择正确的Linux发行版 选择一个好的Linux发行版有很多因素。 避免分发…...
MFC开发,自定义消息
在MFC开发中,主要核心机制就是消息机制。QT与之类似的机制就是信号与槽。QT中的信号与槽是非常容易自定义的,MFC也是如此,自定义也是比较方便,况且自定义消息或者控件在整个GUI图形化界面开发中也是非常重要的部分,上篇…...
如何在 SpringBoot 中优雅的做参数校验?
一、故事背景 关于参数合法性验证的重要性就不多说了,即使前端对参数做了基本验证,后端依然也需要进行验证,以防不合规的数据直接进入服务器,如果不对其进行拦截,严重的甚至会造成系统直接崩溃! 本文结合…...
Godot入门 03世界构建1.0版
在game场景,删除StaticBody2D节点,添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块,自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式,TileMap选择绘制,选中图块后在…...
GitHub每日最火火火项目(7.26)
1. 项目名称:meta - llama / llama3 项目介绍:这是 Meta Llama 3 的官方 GitHub 站点。目前尚不清楚该项目的具体功能和特点,但从名称推测,它可能与 Llama 3 模型相关,或许涉及到该模型的开发、训练或应用等方面。 项…...
微服务实践和总结
H5原生组件web Component Web Component 是一种用于构建可复用用户界面组件的技术,开发者可以创建自定义的 HTML 标签,并将其封装为包含逻辑和样式的独立组件,从而在任何 Web 应用中重复使用。 <!DOCTYPE html> <html><head…...
Spring Boot中的策略模式:优雅地处理不同商品类型的订单
引言 在开发复杂的业务系统时,我们经常会遇到需要根据不同条件执行不同逻辑的情况。例如,在电商平台中,可能需要根据商品的不同类型(如电子产品、服装、食品等)来执行不同的业务逻辑,比如不同的库存管理、…...
django_创建菜单(实现整个项目的框架,调包)
文章目录 前言代码仓库地址在线演示网址启动网站的时候出现错误渲染路径的一些说明文件结构网页显示一条错误路由顺序js打包出现问题的代码函数没有起作用关于进度开发细节显示不了图片梳理一下函数调用的流程修改一些宽度参数classjs 里面的一些细节让三个按钮可以点击设置按钮…...
最新全新UI异次元荔枝V4.4自动发卡系统源码
简介: 最新全新UI异次元荔枝V4.4自动发卡系统源码 更新日志: 1增加主站货源系统 2支持分站自定义支付接口 3目前插件大部分免费 4UI页面全面更新 5分站可支持对接其他分站产品 6分站客服可自定义 7支持限定优惠 图片: 会员中心截图&…...
PyTorch安装CUDA标准流程(可解决大部分GPU无法使用问题)
最近一段时间在研究PyTorch中的GPU的使用方法,之前曾经安装过CUDA,不过在PyTorch中调用CUDA时无法使用。考虑到是版本不兼容问题,卸载后尝试了其他的版本,依旧没有能解决问题,指导查阅了很多资料后才找到了解决方案。 …...
C++从入门到起飞之——初始化列表类型转换static成员 全方位剖析!
🌈个人主页:秋风起,再归来~🔥系列专栏:C从入门到起飞 🔖克心守己,律己则安 目录 1、初始化列表 2、 类型转换 3. static成员 4、完结散花 1、初始化列表 • 之前我们实现构造函数…...
PHP框架简介
PHP是一种广泛使用的开源脚本语言,主要用于Web开发,它可以创建动态交互式Web页面。而PHP框架则是一套用于开发Web应用程序的工具和库的集合,它可以帮助开发者更高效地编写PHP代码,提高开发速度和代码的可维护性。 理解PHP框架&am…...
微信小程序-粘性组件
再次完善:将区域设置为粘性时,会脱离原有文档,使得出现下方页面突然遮盖一部分,不平滑 解决:给出一个新的空白区域,宽高与粘性区域一致,wx:if 控制其显示 /****************/ 后续补充&#…...
微服务注册中心
目录 1.微服务的注册中心 1.1 注册中⼼的主要作⽤ 1.2 常⻅的注册中⼼ 2.nacos简介 2.1 nacos实战⼊⻔ 2.2.1 搭建nacos环境 2.2.2 将商品微服务注册到nacos 3.服务调⽤Ribbon⼊⻔ 3.1 Ribbon概述 3.1.1 什么是Ribbon 3.1.2 Ribbon的主要作⽤ 3.2.2 ⼯程改造 4.服务…...
HDU1032——The 3n + 1 problem,HDU1033——Edge,HDU1034——Candy Sharing Game
目录 HDU1032——The 3n 1 problem 题目描述 运行代码 代码思路 HDU1033——Edge 题目描述 运行代码 代码思路 HDU1034——Candy Sharing Game 题目描述 运行代码 代码思路 HDU1032——The 3n 1 problem 题目描述 Problem - 1032 运行代码 #include <iostr…...
内网对抗-隧道技术篇防火墙组策略HTTP反向SSH转发出网穿透CrossC2解决方案
知识点: 1、C2/C2上线-CrossC2插件-多系统平台支持 2、隧道技术篇-应用层-SSH协议-判断&封装&建立&穿透 3、隧道技术篇-应用层-HTTP协议-判断&封装&建立&穿透隧道技术主要解决网络通讯问题:遇到防火墙就用隧道技术,…...
实战案例:如何用ChatGPT生成适合不同领域的高质量文章
随着人工智能技术的快速进展,制作高质量文章已变得轻而易举。尤其是OpenAI推出的ChatGPT,极大地简化了写作任务。接下来,本文将通过具体案例,详解如何利用ChatGPT撰写不同领域的高品质文章。 背景:光辉AI交流-免费问答…...
多线程案例-单例模式
单例模式是设计模式之一,能保证某个类在程序中只存在唯一一份实例,而不会创建出多个实例 单例模式的具体实现方法有很多,最常见的是 “饿汉” 和 “懒汉” 两种。 饿汉模式 class Singlenton{private static Singlenton instance new Sin…...
【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
