vue之element-ui文件上传（二）
一、点击上传，使用默认的action上传，添加校验，上传成功后，去除校验：
<el-form-item label="文件md5" prop="fileMd5"><el-uploadv-if="!form.fileMd5"v-model="form.fileMd5"class="upload-demo":action="uploadUrl":on-preview="handlePreview":on-remove="handleRemove":on-success="handleSuccess":before-remove="beforeRemove"accept=".apk":limit="1":headers="headers":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传apk文件</div></el-upload><span v-if="form.fileMd5">{{ form.fileMd5 }}</span></el-form-item>js：
data() {return {// 表单参数form: {},// 表单校验rules: {taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" },// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },],fileMd5: [{ required: true, message: "请上传APK文件", trigger: "blur" },],type: [{type: "array",required: true,message: "请至少选择一个分析类型",trigger: "change",},],},headers: {Authorization: "Bearer " + getToken(),},uploadUrl:process.env.VUE_APP_BASE_API + `${config.service}/main/apkImport`,fileList: [],fileData: null,};}, methods: {handleRemove(file, fileList) {console.log(file, fileList);this.form.fileMd5 = "";this.validateField("fileMd5");},handlePreview(file) {console.log(file);},// 文件个数超出handleExceed(files, fileList) {this.$message.warning(`上传文件数量不能超过1个!`);},beforeRemove(file, fileList) {this.form.fileMd5 = "";return this.$confirm(`确定移除 ${file.name}？`);},handleSuccess(response, file, fileList) {console.log("上传成功信息", response, file, fileList);// const { fileName = "", url = "" } = response.data;// this.fileList.push({ name: file.name, url });this.$message.success("上传成功！");this.handleInputClear("fileMd5");this.fileData = JSON.parse(response.data);this.form.fileMd5 = JSON.parse(response.data).fileMd5;},handleInputClear(val) {this.$refs.form.clearValidate(val);},validateField(val) {this.$refs.form.validateField(val);},},二、拖拽上传，和表单一起通过formData提交，添加校验，上传成功后，去除校验：
<el-form-item label="文件上传" prop="file"><el-uploadclass="upload-demo"v-model="form.file"dragaction="#"accept=".xls,.xlsx":auto-upload="false":limit="1":before-remove="beforeRemove":on-remove="handleRemove":on-exceed="handleExceed":on-success="handleSuccess":on-change="handleChange"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><!-- <div class="el-upload__tip" slot="tip">只能上传.xlsx文件</div> --></el-upload></el-form-item>js：
data() {return {// 表单参数form: {},rules: {taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" },],categoryId: [{ required: true, message: "请选择分类", trigger: "change" },],monitoringDeadline: [{required: true,message: "请选择日期时间",trigger: "change",},],file: [{ required: true, message: "请上传Excel文件", trigger: "blur" }],},};},methods: {beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${file.name}？`);},handleRemove(file, fileList) {this.form.file = "";this.$refs.form.validateField("file");},// 文件个数超出handleExceed(file, fileList) {this.$message.warning(`上传文件数量不能超过1个!`);},handleSuccess(response, file, fileList) {console.log("上传成功信息", response, file, fileList);this.$message.success("上传成功！");this.$refs.form.clearValidate("file");},handleChange(file) {// console.log(file, 3333);this.form.file = file.raw;this.$message.success("上传成功！");this.$refs.form.clearValidate("file");},/** 提交按钮 */submitForm() {this.$refs["form"].validate((valid) => {if (valid) {let obj = this.form;let formData = new FormData();for (const key in obj) {formData.append([key], obj[key]);}addMain(formData).then((response) => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}});},},相关文章：
vue之element-ui文件上传（二）
一、点击上传，使用默认的action上传，添加校验，上传成功后，去除校验： <el-form-item label"文件md5" prop"fileMd5"><el-uploadv-if"!form.fileMd5"v-model"form.fileMd5&…...
DC/AC并网逆变器模型与仿真MATLAB
DC/AC并网逆变器是一种将直流电（DC）转化为交流电（AC），并将其与电网并联的设备。它的核心功能是实现直流电源（如光伏电池板或储能电池）与电网的有效连接，同时保证输出电能质量满足电网…...
python面向对象
面向对象简介 python完全采用了面向对象的思想，是真正面向对象的变成语言，完全支持面向对象的基本功能，例如：继承、多态、封装等 python中，一切皆为对象。前面学习的数据类型、函数等都是对象 面向过程和面向对象思…...
【UI自动化测试】selenium八种定位方式
🏡个人主页：謬熙，欢迎各位大佬到访❤️❤️❤️~ 👲个人简介：本人编程小白，正在学习互联网求职知识…… 如果您觉得本文对您有帮助的话，记得点赞👍、收藏⭐️、评论💬&am…...
基于物联网疫苗冷链物流监测系统设计
1. 项目开发背景 随着全球对疫苗运输要求的提高，特别是针对温度敏感型药品（如疫苗）的冷链管理，如何保证疫苗在运输过程中的温度、湿度、震动等环境因素的稳定性已成为亟需解决的问题。疫苗运输过程中，任何温度或湿度的…...
实训云上搭建集群
文章目录 1. 登录实训云1.1 实训云网址1.2 登录实训云 2. 创建网络2.1 网络概述2.2 创建步骤 3. 创建路由器3.1 路由器名称3.1 创建路由器3.3 查看网络拓扑 4. 连接子网5. 创建虚拟网卡5.1 创建原因5.2 查看端口5.3 创建虚拟网卡 6. 管理安全组规则6.1 为什么要管理安全组规则6…...
【网页自动化】篡改猴入门教程
安装篡改猴 打开浏览器扩展商店（Edge、Chrome、Firefox 等）。搜索 Tampermonkey 并安装。 如图安装后，浏览器右上角会显示一个带有猴子图标的按钮。 创建用户脚本 已进入篡改猴管理面板点击创建 脚本注释说明 name：脚本名称。…...
（概率论）无偏估计
参考文章：(15 封私信 / 51 条消息) 什么是无偏估计？ - 知乎 (zhihu.com) 首先，第一个回答中，马同学图解数学讲解得很形象， 我的概括是：“注意，有一个总体的均值u。然后，如果抽样n个&…...
JavaScript 正则表达式
JavaScript 正则表达式（RegEx）是一种强大的工具，用于在字符串中查找匹配的模式、替换文本，或者验证输入的格式。下面是一些常用的正则表达式操作和语法： 常用正则表达式符号： .：匹配任意字符（除了换行符）。^：匹配输入字符串的开始。$：匹配输入字符串的结束。[]：定…...
Swift语言的正则表达式
Swift语言的正则表达式 正则表达式是一种用于匹配字符串的强大工具，它可以帮助开发者在文本处理中高效地搜索和操作字符串。在Swift语言中，正则表达式的支持是通过Foundation框架提供的。本文将全面介绍Swift中的正则表达式，从基础知识到进阶…...
Matlab 数据处理与可视化的多元拓展应用（具体代码分析）
一、代码整体功能概述： 该代码主要实现了以下几个功能： 从文件（part1.txt）中读取数据，并提取第二列数据，将其存储在 originalColumnData 中。对原始数据进行可视化，包括绘制置零前数据的折线图…...
小程序与内嵌网页的数据通信
小程序与内嵌网页的数据通信 前言 微信小程序提供了web-view组件，允许开发者在小程序中嵌入网页。然而，由于小程序和网页运行在不同的环境中，它们之间的通信就需要依赖特定的机制来实现。然而我们日常的需求中，很多的时候都涉及…...
【学习笔记】数据结构（十一）
外部排序 文章目录 外部排序11.1 外存信息的存取11.2 外部排序的方法11.3 多路平衡归并的实现 - 增加k11.4 置换-选择排序 - 减少m11.5 最佳归并树 外部排序 指的是大文件的排序，即待排序的记录存储在外存储器 上，在排序过程中需进行多次的内、外存之间的…...
【Logstash03】企业级日志分析系统ELK之Logstash 过滤 Filter 插件
Logstash 过滤 Filter 插件 数据从源传输到存储库的过程中，Logstash 过滤器能够解析各个事件，识别已命名的字段以构建结构， 并将它们转换成通用格式，以便进行更强大的分析和实现商业价值。 Logstash 能够动态地转换和解析数据&a…...
深度学习模型部署——基于Onnx Runtime的深度学习模型CPU与GPU部署（C++实现）
1.概述 许多机器学习和深度学习模型都是在基于 Python 的框架中开发和训练的，例如 PyTorch 和 TensorFlow 等。但是，当需要将这些训练好模型部署到生产环境中时，通常会希望将模型集成到生产流程中，而这些流程大多是用 C 编写的&a…...
Selenium 的四种等待方式及使用场景
Selenium 的四种等待方式及使用场景 隐式等待（Implicit Wait）显式等待（Explicit Wait）自定义等待（Custom Wait）固定等待（Sleep） 1. 隐式等待 定义： 隐式等待是为 WebD…...
攻防世界 ics-07
点击之后发现有个项目管理能进，点进去，点击看到源码，如下三段 <?php session_start(); if (!isset($_GET[page])) { show_source(__FILE__); die(); } if (isset($_GET[page]) && $_GET[page] ! index.php) { include(flag.php);…...
一文读懂「LoRA」：大型语言模型的低秩适应
LoRA: Low-Rank Adaptation of Large Language Models 前言 LoRA作为大模型的微调框架十分实用，在LoRA出现以前本人都是通过手动修改参数、优化器或者层数来“炼丹”的，具有极大的盲目性，但是LoRA技术能够快速微调参数，如果LoRA…...
新车月交付突破2万辆！小鹏汽车“激活”智驾之困待解
首次突破月交付2万辆规模的小鹏汽车，稳吗？ 本周，高工智能汽车研究院发布的最新监测数据显示，2024年11月，小鹏汽车在国内市场（不含出口）交付量（上险口径，下同）…...
)
dockerfile 中 #(nop)
在 Dockerfile 中，#(nop) 通常出现在 docker history 命令的输出中。以下是对它的详细解释： 背景 当你使用 docker history <image_name> 命令查看 Docker 镜像的构建历史时，你可能会看到 #(nop) 这样的标记。这是因为 Docker 镜像由…...
升级 Spring Boot 3 配置讲解 —— 为何 SpringBoot3 淘汰了 JDK8？
学会这款 🔥全新设计的 Java 脚手架 ，从此面试不再怕！ 随着 Spring Boot 3 的发布，许多开发者发现了一个重要的变化：Spring Boot 3 不再支持 JDK 8。这一变化引发了不少讨论，尤其是对于那些仍然在使用 JDK …...
IT面试求职系列主题-人工智能（一）
想成功求职，必要的IT技能一样不能少，再从人工智能基础知识来一波吧。 1）您对人工智能的理解是什么？ 人工智能是计算机科学技术，强调创造能够模仿人类行为的智能机器。这里智能机器可以定义为能够像人一样行动、像人一…...
JVM 优化指南
JVM 优化指南 1. JVM 参数配置 1.1 基础参数配置 设置堆内存大小 -Xms2048m -Xmx2048m 设置新生代大小 -Xmn1024m 设置元空间大小 -XX:MetaspaceSize256m -XX:MaxMetaspaceSize256m 设置线程栈大小 -Xss512k1.2 垃圾回收器配置 使用 G1 垃圾回收器 -XX:UseG1GC 设置期望停顿…...
windows下编写的shell脚本在Linux下执行有问题解决方法
前言： 这个问题在实际工作中经常会遇到(非语法错误)，脚本来源有些是自己在windows系统编写的、有些是从别人那里copy来的，还有些原本是好的被别人拿到windows下修改了一些内容，总之各种场景，但是如果是一个内容比较多的…...
使用 SQL 和表格数据进行问答和 RAG（6）—将指定目录下的 CSV 或 Excel 文件导入 SQLite 数据库
将指定目录下的 CSV 或 Excel 文件导入 SQLite 数据库。以下是详细代码逻辑： 1. 类结构 该类包含三个主要方法： _prepare_db：负责将文件夹中的 CSV 和 XLSX 文件转换为 SQL 表。_validate_db：用于验证 SQL 数据库中创建的表是否…...
【算法】算法大纲
这篇文章介绍计算机算法的各个思维模式。 包括 计数原理、数组、树型结构、链表递归栈、查找排序、管窥算法、图论、贪心法和动态规划、以及概率论：概率分治和机器学习。没有办法逐个说明，算法本身错综复杂，不同的算法对应着不同的实用场景，也需要根据具体情况设计与调整。…...
开发者工具资源)
vue（2,3）, react (16及以上)开发者工具资源
在前端开发的广阔领域中，Vue.js 和 React.js 作为两大主流框架，各自拥有庞大的用户群体和丰富的生态系统。为了帮助开发者更高效地进行调试和开发，Vue Devtools 和 React 开发者工具应运而生，成为这两个框架不可或缺的辅助工具。本…...
)
系统编程(网络,文件基础)
网络链接 虚拟机和主机之间网络连接的主要模式有三种，分别是桥接模式（Bridged）、网络地址转换模式（NAT）以及主机模式（Host-Only）。以下是这三种模式的详细解释： 一、桥接模式&…...
重温设计模式--13、策略模式
策略模式介绍 文章目录 策略模式介绍C 代码示例 策略模式是一种行为设计模式，它允许在运行时选择算法的行为。该模式将算法的定义和使用分离开来，使得算法可以独立于使用它的客户端而变化，提高了代码的灵活性和可维护性。 其主要包含以下几个…...
数字IC设计高频面试题
在数字IC设计领域，面试是评估候选人技术能力和问题解决能力的重要环节。数字IC设计的复杂性和要求在不断提高。面试官通常会提出一系列面试题，以考察应聘者在数字设计、验证、时钟管理、功耗优化等方面的专业知识和实践经验。 这些题目不仅涉及理论知识…...
C#异步多线程——ThreadPool线程池
C#实现异步多线程的方式有多种，以下总结的是ThreadPool的用法。 线程池的特点 线程池受CLR管理，线程的生命周期，任务调度等细节都不需要我们操心了，我们只需要专注于任务实现，使用ThreadPool提供的静态方法把我们的任…...
矩母函数（MGF）
矩母函数（MGF）简介 矩母函数（Moment Generating Function，MGF）是概率统计中描述随机变量分布特征的重要工具。MGF的主要用途是通过导数来计算随机变量的矩（比如均值、方差等），同时它…...
【技术支持】安卓无线adb调试连接方式
Android 10 及更低版本，需要借助 USB 手机和电脑需连接在同一 WiFi 下；手机开启开发者选项和 USB 调试模式，并通过 USB 连接电脑（即adb devices可以查看到手机）；设置手机的监听adb tcpip 5555;拔掉 USB 线…...
将三维空间中的点投影到二维图像平面上函数projectPoints()的使用)
OpenCV相机标定与3D重建(46)将三维空间中的点投影到二维图像平面上函数projectPoints()的使用
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 将3D点投影到图像平面上。 cv::projectPoints 是 OpenCV 库中的一个函数，用于将三维空间中的点投影到二维图像平面上。这个过程涉及到…...
Android wifi常见问题及分析
参考 Android Network/WiFi 那些事儿 前言 本文将讨论几个有意思的网络问题，同时介绍 Android 上常见WiFi 问题的分析思路。 网络基础Q & A 一. 网络分层缘由 分层想必大家很熟悉，是否想过为何需要这样分层？ 网上大多都是介绍每一层…...
如何用 ESP32-CAM 做一个实时视频流服务器
文章目录 ESP32-CAM 概述ESP32-S 处理器内存Camera 模块MicroSD 卡槽天线板载 LED 和闪光灯其他数据手册和原理图ESP32-CAM 功耗 ESP32-CAM 引脚参考引脚排列GPIO 引脚哪些 GPIO 可以安全使用？GPIO 0 引脚MicroSD 卡引脚 ESP32-CAM 的烧录方式使用 ESP32-CAM-MB 编程…...
编译与汇编
本文来自《程序员的自我修养》 编译过程是把预处理完的文件进行一系列词法分析，语法分析，语义分析以及优化后生成相应的汇编文件代码。 现在版本的GCC把预编译和编译两个步骤合并为一个步骤。 gcc -S HelloWorld.c HelloWorld.sint main() {//test/* …...
Linux入门攻坚——43、keepalived入门-1
Linux Cluster（Linux集群的类型）：LB、HA、HPC，分别是负载均衡集群、高可用性集群、高性能集群。 LB：lvs，nginx HA：keepalived，heartbeat，corosync，cman HP&am…...
备考蓝桥杯：顺序表相关算法题
目录 询问学号 寄包柜 移动0 颜色分类 合并两个有序数组 物品移动 询问学号 我们的思路：创建一个顺序表存储从1开始依次存放进入教室的学生学号，然后查询 #include <iostream> #include <vector> using namespace std; const int N 2…...
【STM32+QT项目】基于STM32与QT的智慧粮仓环境监测与管理系统设计（完整工程资料源码）
视频演示： 基于STM32与QT的智慧粮仓环境监测与管理系统设计 目录： 目录 视频演示： 目录： 前言：...
Vue3 自定义hook
文章目录 Vue3 自定义hook概述用法 Vue3 自定义hook 概述 Vue3推荐利用Vue的组合式API函数进行代码封装，这种封装方式统称为自定义hook。 用法 定义 hook/countHook.js： import {computed, ref, watch} from "vue";export default (initC…...
【VBA】【EXCEL】将某列内容横向粘贴到指定行
Sub CopyRowToColumn()On Error GoTo ErrorHandler 添加错误处理Application.ScreenUpdating FalseApplication.Calculation xlCalculationManualApplication.EnableEvents False 禁用事件处理Dim lastCol As LongDim lastRow As LongDim i As Long, colCount As LongDim …...
使用Llama 3.1创建合成数据集以调优你的大型语言模型
使用Llama 3.1创建合成数据集以调优你的大型语言模型 在数据驱动的人工智能领域，数据是核心资产。开发高质量数据集既复杂又昂贵，因此很多实验室和开发者选择使用合成数据集。本文将介绍如何利用大型语言模型Llama 3.1 405B创建合成数据集，并…...
【Ubuntu22.04】VMware虚拟机硬盘扩容
1.首先打开虚拟机设置 2.根据需要对硬盘扩展 这边提示我们还需要进入虚拟机在内部分区 3.安装界面化磁盘管理工具 # 安装 sudo apt install gparted# 启动 sudo gparted调整硬盘大小 调整的时候会提示我们硬盘是只读的，因此还要进行操作 新建终端重新挂载文件系…...
初学stm32 --- DMA直接存储器
目录 DMA介绍 STM32F1 DMA框图 DMA处理过程 DMA通道 DMA优先级 DMA相关寄存器介绍 F1 DMA通道x配置寄存器（DMA_CCRx） DMA中断状态寄存器（DMA_ISR） DMA中断标志清除寄存器（DMA_IFCR） DMA通道x传输…...
reactor中的并发
1. reactor中的并发有两种方式 1.1 flatmap，底层是多线程并发处理。在reactor的演讲中，flatmap对于io类型的并发效果较好. flamap有两个参数: int concurrency, int prefetch。分别代表并发的线程数和缓存大小 注意凡是参数中有prefetch的，都…...
HTML - ＜script＞，＜noscript＞
<script>标签用于在网页插入脚本，<noscript>标签用于指定浏览器不支持脚本时的显示内容。 1.<script> <script>用于加载脚本代码，目前主要是加载 JavaScript 代码。 <script> console.log(hello world); </script&g…...
C#语言的函数实现
C#语言的函数实现 在现代编程语言中，函数（Function）是最基本也是最重要的组成部分之一。函数不仅提高了代码的复用性，还使得程序结构更清晰。C#作为一种多用途的编程语言，函数的知识是程序员必备的基本技能之一。本文…...
JAVA I/O流练习1
往D盘中的JAVA复习文件夹中写数据： 数据改了一下哈： import java.io.*; import java.util.Scanner; public class Test {public static void main(String[] args) throws IOException {String fileName"D:JAVA复习\\grade.txt";FileWriter w…...
HTML——75. 内联框架
<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>内联框架</title><style type"text/css">iframe{width: 100%;height: 500px;}</style></head><body><!--iframe元素会创建包含…...