当前位置: 首页 > 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…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...