el-upload批量手动上传,并用form表单校验上传文件
手动上传设置:auto-upload="false"
<el-formref="formData"class="formWidth":model="formData"label-width="120px":rules="rules"><el-form-itemlabel="数据"class="uploadClass"requiredprop="fileList"><el-uploadclass="upload-demo"action="#":on-change="handleChange":on-preview="handlePreview":auto-upload="false"accept=".jpg, .jpeg, .png, .jfif":on-remove="handleRemove":file-list="formData.fileList"multiple:limit="1000"><el-button size="small" type="primary">选择文件</el-button><div slot="tip" class="el-upload__tip">jpg/png/jfif</div></el-upload></el-form-item></el-form><vxe-buttonstatus="primary":loading="confirmLoading":content="confirmLoading ? '识别中' : '确认'"@click="confirmInfo()"size="small"></vxe-button>
data() {return {// 上传参数addModel: false,formData: {fileList: [],},rules: {fileList: [{ required: true, message: "请上传数据", trigger: "change" },],},errorMsg: null, // 业务编码校验提示语}},
// 确认上传async confirmInfo() {// 整体表单校验this.$refs.formData.validate(async (valid) => {if (!valid) {return false;}this.confirmLoading = true;let pathUrl = [],i=0;for (let list of this.formData.fileList) {let targetRoute = `file/${list?.name}`;await putFile(targetRoute, list.raw);// 第一次上传oss的时候延迟5ms,用于oss上传函数请求成功并获得返回值,防止循环请求oss token获取函数if (i == 0) await this.delay(500);pathUrl.push(targetRoute);i++;}//此处写请求函数await this.$rquest.aaa()});},// 延迟函数async delay(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});},// 上传之前校验handleChange(file, fileList) {let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);let typeInfo = ["jpg", "jpeg", "png", "jfif"];fileName = fileName.toLowerCase();if (!typeInfo.includes(fileName)) {this.$message({type: "warning",message: "请上传jpg/png/jfif格式的图片",});// 过滤掉不符合条件的文件this.formData.fileList = this.formData.fileList.filter((list) => list.uid != file.uid);return false;}// 存储符合条件的所有fileList数据this.formData.fileList = fileList; // 存储上传的文件},handleRemove(file, fileList) {// 执行移除方法的时候重新更新数据this.formData.fileList = fileList;console.log(file, fileList);},handlePreview(file) {console.log(file);},
相关文章:
el-upload批量手动上传,并用form表单校验上传文件
手动上传设置:auto-upload"false" <el-formref"formData"class"formWidth":model"formData"label-width"120px":rules"rules"><el-form-itemlabel"数据"class"uploadClass"required…...
牛客网Verilog刷题——VL52
牛客网Verilog刷题——VL52 题目答案 题目 请编写一个十进制计数器模块,当mode信号为1,计数器输出信号递增,当mode信号为0,计数器输出信号递减。每次到达0,给出指示信号zero。模块的接口信号图如下: 模块的…...
4-7月预测价差方向准确率统计
月度 预测价差方向准确率 4月 33.6% 5月 28.4% 6月 25.7% 7月 34.2% 4-7月合计 30.6% 准确率计算公式: 其中, D:价差方向预测值(1:实时>日前,0:实时日前,-1:实时<日前&#x…...
《Vue3+Typescript》一个简单的日历组件实现
这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~ 主页: oliver尹的主页 格言: 跌倒了爬起来就好~ 目录 一、…...
第一章 修学旅行
前言 翻了翻文章回收站,好怀念靖和阳的故事啊(航和颜:还有我们别忘啦) 不知道还有没有人记得以前的故事呢…… 那么,我就开始写啦。这是关于密码学的一篇文章,一共2696字:D(累死我…...
如果你也能认识并使用这个低代码平台,那真的是泰酷辣——iVX低代码平台
低代码技术起源是比较悠久的了,尤其是在近些年,随着技术的演进,低代码平台逐渐成为热门趋势。这些平台通过简化应用程序开发流程,减少手动编码,使非专业开发人员也能快速构建复杂应用。为我们的敏捷开发和高效生产贡献…...
uC-OS2 V2.93 STM32L476 移植:系统移植篇
前言 上一篇已经 通过 STM32CubeMX 搭建了 NUCLEO-L476RG STM32L476RG 的 裸机工程,并且下载了 uC-OS2 V2.93 的源码,接下来,开始系统移植 开发环境 win10 64位 Keil uVision5,MDK V5.36 uC-OS2 V2.93 开发板:NUC…...
gitee修改代码提交操作步骤说明
一,简介 本文主要介绍如何从gitee仓库下载文件,本地修改,本地提交,然后再push到远程服务器的操作步骤。供参考,欢迎一起讨论交流~ 二,操作步骤 总的操作步骤分为以下几步 1,远程服务器下载文…...
物联网|可变参数的使用技巧|不一样的点灯实验|访问外设的寄存器|操作寄存器实现点灯|硬件编程的基本流程-学习笔记(11)
文章目录 可变参数的使用技巧第三阶段-初级实验Lesson5:不一样的点灯实验---学习I/O的输出 ☆点灯的电路图分析1 一起看看点灯的电路图Tip1:另一种点灯的电路Tip1:如何访问外设的寄存器2 STM32F407中操作GPIO的方法 通过直接操作寄存器实现点灯实验Tip1:硬件编程的基本流程 2代…...
30. 利用linprog 解决 生产决策问题(matlab程序)
1.简述 线线规划的几个基本性质:【文献[1]第46页】 (1)线性规划问题的可行域如果非空,则是一个凸集-凸多面体; (2)如果线性规划问题有最优解,那么最优解可在可行域的顶点中确定; (3)如果可行域有界,且可行域…...
一百三十九、Kettle——Linux安装Kettle8.2
一、目的 为了方便海豚调度kettle任务,在Linux上安装kettle 二、kettle版本与前提 版本:kettle8.2 pdi-ce-8.2.0.0-342 前提:Linux已经安装好jdk 三、安装步骤 (一)打开安装包所在地 [roothurys22 ~]# cd …...
react路由在layout中的监听
业务中需要在layout里来监听路由的变化,但是layout并不是一个路由组件,所以layout组件内的props并没有location,history等属性,(路由组件:由Route组件处理的才是路由组件)所以我们需要将layout组件转变成路…...
Java反射(三)
目录 1.反射与代理设计模式 2.反射与Annotation 3.自定义Annotation 4.Annotation整合工厂设计模式和代理设计模式 1.反射与代理设计模式 代理模式是指通过业务真实类实现业务接口,再通过设置代理类创建业务真实类子类从而间接访问业务真实类。但是这存在一个弊…...
ansible-playbook roles编写lnmp剧本
目录 集中式编写lnmp剧本 执行 分布式编写lnmp剧本 一定要设置ssh免交互 nginx mysql php 执行 集中式编写lnmp剧本 vim /etc/ansible/lnmp.yml - name: lnmp playhosts: dbserversremote_user: roottasks:- name: perpare condifurecopy: src/etc/yum.repos.d/nginx.r…...
相机可用性变化监听AvailabilityCallback流程分析
相机可用性变化监听及流程分析 一、接口说明 相机可用性变化监听可以通过CameraManager中的接口registerAvailabilityCallback()来设置回调,接口如下: /** *注册一个回调以获得有关相机设备可用性的通知。 * *<p>再次注册相同的回调将用提供…...
使用Python多线程实现生产者消费者模型
“Talk is cheap, show me the code.” 废话不多说,直接上代码: """ 生产者消费者模型 Python实现 """ import queue import threading import random import timeclass ConsProd:# 队列参数_que None # 队列# 生产者…...
Notepad++工具通过正则表达式批量替换内容
1.每行末尾新增特定字符串 CtrlH弹出小窗口;查找目标输入$,替换为输入特定字符串;选中循环查找,查找模式选正则表达式;最后点击全部替换 2.每行行首新增特定字符串 CtrlH弹出小窗口;查找目标输入^&…...
从零构建深度学习推理框架-3 手写算子relu
Relu介绍: relu是一个非线性激活函数,可以避免梯度消失,过拟合等情况。我们一般将thresh设为0。 operator类: #ifndef KUIPER_COURSE_INCLUDE_OPS_OP_HPP_ #define KUIPER_COURSE_INCLUDE_OPS_OP_HPP_ namespace kuiper_infer {…...
想做上位机,学C#还是QT?
学习C#还是Qt,取决于你的具体需求和偏好。 如果你计划开发跨平台的桌面应用程序,并且希望使用一种更轻量级、直观的界面框架,那么Qt可能是一个不错的选择。Qt是一个功能丰富且成熟的跨平台框架,支持多种开发语言(包括…...
Ansible —— playbook 剧本
Ansible —— playbook 剧本 一、playbook的概述1.playbook简介2.什么是Ansible playbook剧本?3.Ansible playbook剧本的特点4.如何使用Ansible playbook剧本?5.playbooks 本身由以下各部分组成 二、playbook示例1.运行playbook2.定义、引用变量3.指定远…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
接口自动化测试:HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
