结合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…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
02.运算符
目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&:逻辑与 ||:逻辑或 !:逻辑非 短路求值 位运算符 按位与&: 按位或 | 按位取反~ …...
