当前位置: 首页 > news >正文

vue限定类型上传文件 最简单实践(单个可文件、可图片)

这个是为了文件导入弄的,内部运维人员使用的 目前还没做删除文件的交互

<el-uploadclass="upload-demo"ref="upload":before-upload="handleBeforeUpload"action="#"accept=".xls,.xlsx":limit="1"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><div slot="tip" class="el-upload__tip">请上传 大小不超过 10MB 格式为 xls/xlsx 的文件</div>##简单展示 未做删除交互<li v-if="this.file != null">{{this.file.name}}</li></el-upload>data() 内新增属性file:null,
##获取file对象handleBeforeUpload(file) {this.file =file;},
##表单提交submitFormImport(){this.$refs["forms"].validate(valid => {let formData = new FormData();formData.append('file',this.file);##属性类型formData.append('taskId',this.taksForip.taskId);console.log(formData);importForCode(formData).then(response => {this.$modal.msgSuccess(response.msg);this.opens = false;});});},
## (@RequestParam("file") MultipartFile file  后台属性 

延伸代码 再次限制类型 与大小 fileSizewei
fileSize: {
type: Number,
default: 5 ##5M
},

   handleBeforeUpload(file) {// 校检文件类型if (this.fileType) {const fileName = file.name.split(".");const fileExt = fileName[fileName.length - 1];const isTypeOk = this.fileType.indexOf(fileExt) >= 0;if (!isTypeOk) {this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);return false;}}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024   < this.fileSize;if (!isLt) {this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}this.$modal.loading("正在上传文件,请稍候...");this.number++;return true;},

相关文章:

vue限定类型上传文件 最简单实践(单个可文件、可图片)

这个是为了文件导入弄的&#xff0c;内部运维人员使用的 目前还没做删除文件的交互 <el-uploadclass"upload-demo"ref"upload":before-upload"handleBeforeUpload"action"#"accept".xls,.xlsx":limit"1">&l…...

【GUI设计】基于图像分割和边缘算法的GUI系统(7),matlab实现

博主简介&#xff1a; 如需获取设计的完整源代码或者有matlab图像代码项目需求/合作&#xff0c;可联系主页个人简介提供的联系方式或者文末的二维码。 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于图像分割和边缘算法的GUI系统…...

未来之窗VOS编程工具让你的工作效率翻倍———未来之窗行业应用跨平台架构

未来之窗编程工具概述 平板电脑/手机用于编程具有诸多优点。其便携性强&#xff0c;方便随时随地开展工作。触摸操作直观便捷&#xff0c;长续航能满足长时间需求&#xff0c;启动迅速。支持手写绘图&#xff0c;利于表达想法。能集成多种编程工具&#xff0c;还便于通过云服务…...

分布式数据库——HBase基本操作

启动HBase: 1.启动hadoop,进入hadoop的sbin中 cd /opt/hadoop/sbin/ 2.初始化namenode hdfs namenode -format 3.启动hdfs ./start-all.sh 4.启动hbase cd /opt/hbase/bin ./start-hbase.sh 5.使用jps查看进程 jps 以下图片则是hbase启动成功~ 运行HBase ./hbase sh…...

Go语言并发编程中的超时与取消机制解析

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 并发编程是Go语言的核心优势之一,而在实际应用中,超时和取消操作会频繁出现。超时机制能够帮助我们理解系统行为,防止系统因为某些任务执行过长而陷入困境。与此同时,取消操作则是应对超时的一种自然反应。此…...

Unity3D UIdocument如何改变层级详解

前言 在Unity3D中&#xff0c;UI文档的层级改变通常涉及UI元素的显示顺序&#xff0c;这是通过UGUI&#xff08;Unitys Graphical User Interface&#xff09;系统来实现的。以下是一篇关于如何在Unity3D中改变UI元素层级的详细解析&#xff0c;包括技术详解和代码实现。 对惹…...

Debian与Ubuntu:深入解读两大Linux发行版的历史与联系

Debian与Ubuntu&#xff1a;深入解读两大Linux发行版的历史与联系 引言 在开源操作系统的领域中&#xff0c;Debian和Ubuntu是两款备受瞩目的Linux发行版。它们不仅在技术上有着密切的联系&#xff0c;而且各自的发展历程和理念也对开源社区产生了深远的影响。本文将详细介绍…...

GPU服务器本地搭建Dify+xinference实现大模型应用

文章目录 前言一、显卡驱动配置1.检测显卡2.安装驱动 二、安装nvidia-docker二、安装Xinference1.拉取镜像2.运行Xinference3.模型部署 三、安装Dify1.下载源代码2.启动 Dify3.访问 Dify 四、Dify构建应用1.配置模型供应商2.聊天助手3.Agent 前言 本文使用的GPU服务器为UCloud…...

嵌入式程序设计经验 创建复位函数

在设计嵌入式系统重新时 需要考虑软复位的情况, 软复位时 很多变量都需要重置为初始值, 如果一个个去赋值 很麻烦, 下面是一个简单的办法 主要是对结构体 复位的方法: #include <stdint.h>typedef struct {uint8_t reg1;uint8_t reg2;uint8_t reg3; } StruSimuStat1…...

每天五分钟深度学习框架pytorch:交叉熵计算时的维度是什么?

本文重点 前面我们学习了pytorch中已经封装好的损失函数,已经封装好的损失函数有很多,但是我们并没有详细介绍,原因就是单独介绍损失函数可能难以理解,我们上一章节的目的是让大家先了解一下常见的损失函数,然后再之后的实际使用中遇到哪个损失函数,我们就使用哪个损失函…...

【Axure视频教程】跨页面控制中继器表格

今天教大家在Axure制作跨页面控制中继器表格的原型模板&#xff0c;我们可以在一个页面中通过交互&#xff0c;对另一个页面中的中继器进行控制&#xff0c;控制其显示的数据内容。那这个模板使用也很简单&#xff0c;复制粘贴按钮&#xff0c;在中继器表格里填写对应的数据&am…...

Android 利用OSMdroid开发GIS 添加 控件以及定位

部署看这个&#xff1a;Android 利用OSMdroid开发GIS-CSDN博客 添加控件&#xff0c;直接上源码 activity_main.xml&#xff1a; <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/…...

前端vue-实现富文本组件

1.使用wangeditor富文本编辑器 工具网站&#xff1a;https://www.wangeditor.com/v4/ 下载安装命令&#xff1a;npm i wangeditor --save 成品如下图&#xff1a; 组件实现代码 <template><div><!-- 富文本编辑器 --><div id"wangeditor">…...

AUTOSAR汽车电子嵌入式编程精讲300篇-基于CAN总线的气动控制(中)

目录 2.2 CAN总线技术及TTCAN协议 2.2.1 CAN总线技术 2.2.2 TTCAN协议 3 气动系统的定位控制研究 3.1 滑模控制原理 3.1.1 滑模控制概念和特性 3.1.2 滑模控制的抖振问题 3.1.3 非奇异终端滑模控制 3.2 气动系统定位控制策略设计 3.2.1 跟踪微分器的设计…...

国内可用ChatGPT-4中文镜像网站整理汇总【持续更新】

一、GPT中文镜像网站 ① yixiaai.com 支持GPT4、4o以及o1&#xff0c;支持MJ绘画 ② chat.lify.vip 支持通用全模型&#xff0c;支持文件读取、插件、绘画、AIPPT ③ AI Chat 支持GPT3.5/4&#xff0c;4o以及MJ绘画 二、模型知识 o1/o1-mini&#xff1a;最新的版本模型&am…...

前端sm2国密加密时注意

如下方法&#xff1a; export function encrypt(str) {const sm2 require("sm-crypto").sm2;const cipherMode 1; // 1 - C1C3C2&#xff0c;0 - C1C2C3&#xff0c;默认为1//自定义密钥let publicKey "xxxxxxxx";//此处加密let a sm2.doEncrypt(str,…...

LeetCode 面试经典150题 9.回文数

题目&#xff1a; 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数&#xff1a;是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&…...

select 函数简介

原型 #include <sys/select.h> #include <sys/time.h> #include <unistd.h> int select(int n, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct timeval *timeout); 作用 select 函数是 UNIX 和类 UNIX 系统&#xff08;如 Linux&am…...

python - 在linux上编译py文件为【.so】文件部署项目运行

python - 在linux上编译py文件为【.so】文件&#xff0c;可通过主文件直接执行 一. 前言 在Python中&#xff0c;通常不直接将Python代码编译为.so&#xff08;共享对象&#xff09;文件来执行&#xff0c;因为.so文件是编译后的二进制代码&#xff0c;通常用于C或C等语言&am…...

SQL_having_pandas_filter

HAVING子句在SQL中用于对分组后的结果进行过滤&#xff0c;它通常与GROUP BY子句一起使用。HAVING子句允许你指定条件来过滤聚合函数的结果&#xff0c;而WHERE子句则用于在分组之前过滤原始数据。 基本语法 SELECT column_name, aggregate_function(column_name) FROM table…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...