el-upload的多个文件与单个文件上传

 

 样式图:

场景多个:

使用el-upload上传多个文件

<el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove1":on-success="handleAvatarSuccess1"  multiple :limit="5" :on-exceed="handleExceed1" :file-list="fileList1"><el-button size="small" type="primary">点击上传</el-button>
</el-upload>multiple 就是可以上传多个的参数文件的上传地址 :https://xxx.com/xxx/upload  配置在env文件
uploadUrl: process.env.VUE_APP_XXX配置的名字handleAvatarSuccess1:上传成功后的函数
handleAvatarSuccess1(res, file, fileList) {  不同的接口的返回参数可能不一样let obj = {};obj.fileName = res.data.fileName;obj.fileUrl = res.data.filePath;this.bothFile1.push(obj);},handleRemove1:移除已经上传的文件
bothFile1 :是要发送给接口的参数
handleRemove1(file, fileList) {      多个和单个的这里在我这篇文章中不一样this.bothFile1 = this.bothFile1.filter((item) => {return item.fileUrl != file.response.data.filePath;});
},handleExceed1 :超过限制以后handleExceed1(files, fileList) {this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);},fileList1:是上传后显示在按钮下面的文件列表
由于这里是在el-dialog里面,因此如果关闭后或者上传成功后fileList1要清空
场景单个:
   <el-upload :action="uploadBothPdf" :file-list="fileList3" :on-exceed="handleExceed3":on-success="handleAvatarSuccess3" multiple :limit="1" >el-button size="small" type="primary">点击上传</el-button>/el-upload>差别在于,由于只能上传一个文件所以就不需要remove,因为文件是必传,如果是非必选则需要写on-remove 在bothFles(传递的给接口的参数)里面去掉被删除的文件handleAvatarSuccess3(res, file) {this.bothFile3.fileName = res.data.fileName;this.bothFile3.fileUrl = res.data.filePath;},
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/754260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高通 8255 基本通信(QUP)Android侧控制方法说明

一&#xff1a;整体说明 高通8255芯片中&#xff0c;SPI IIC UART核心统一由QUP V3 进行控制 QUP V3为可编程模块&#xff0c;可以将不同通道配置为SPI IIC UART通路&#xff0c;此部分配置在QNX侧 QUP 资源可以直接被QNX使用&#xff0c;Android侧可以通过两种方法使用QUP资源…

uniapp+vue3+setup语法糖开发微信小程序时不能定义globalData的解决方法

在使用 uniapp 开发小程序的时候&#xff0c; 发现使用了setup 语法糖 &#xff0c;定义 globalData 时&#xff0c;要不是定义不了&#xff0c; 要不就是使用 getApp()取不到&#xff0c;后来想到一个不伦不类的方法解决了&#xff0c; 这个方法有点难看&#xff0c; 但是解决…

WPF连接MySqldemo

界面总要管理数据嘛,于是便学习了一下WPF与MySql的基本连接. 运行结果: 环境配置 需要下载安装Mysql,网上教程很多,不详说,创建的工程需要下载或者引入相关的包(MySql.Data) 连接的部分直接看具体的代码即可 xaml代码(只放置了一个按钮和文本框) <Grid><Button x:Name…

mybatis-plus 的saveBatch性能分析

Mybatis-Plus 的批量保存saveBatch 性能分析 目录 Mybatis-Plus 的批量保存saveBatch 性能分析背景批量保存的使用方案循环插入使用PreparedStatement 预编译优点&#xff1a;缺点&#xff1a; Mybatis-Plus 的saveBatchMybatis-Plus实现真正的批量插入自定义sql注入器定义通用…

5 数据分析——matplotlib

文章目录 基本绘图Matplotlib 多图布局均匀分布子图 subplotsubplots 图例线条属性坐标轴刻度设置坐标轴范围标题和网格标签文本注释保存图片 matplotlib 常用视图折线图柱形图/条形图簇状柱形图堆叠柱状图条形图 直方图箱形图散点图饼图面积图热力图极坐标图雷达图 等高线图 导…

【C语言】猜数字游戏

代码如下&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <stdlib.h> #include <time.h> void game() {int r rand() % 100 1;int guess 0;while (1){printf("请猜数字>:");scanf("%d", &guess…

【神经网络 基本知识整理】(激活函数) (梯度+梯度下降+梯度消失+梯度爆炸)

神经网络 基本知识整理 激活函数sigmoidtanhsoftmaxRelu 梯度梯度的物理含义梯度下降梯度消失and梯度爆炸 激活函数 我们知道神经网络中前一层与后面一层的连接可以用y wx b表示&#xff0c;这其实就是一个线性表达&#xff0c;即便模型有无数的隐藏层&#xff0c;简化后依旧…

R语言基础 - 饼图piechart

R语言基础绘图 —— 饼图piechart 数据准备 这里展示变异注释类型所占百分比&#xff1a; filename <- "data/Count_by_effects.csv"df <- read.csv(filename)# 去除百分比符号&#xff0c;并转换为数值df$Percent <- as.numeric(gsub("%", "…

ubuntu - 安装cmake

编译时提示 CMake Error at CMakeLists.txt:24 (cmake_minimum_required): CMake 3.22 or higher is required. You are running version 3.10.2 -- Configuring incomplete, errors occurred! 大概意思就是编译使用cmake的最低版本是 3.22&#xff0c;我自己的是3.10.2。…

【目标检测】YOLOv2 网络结构(darknet-19 作为 backbone)

上一篇文章主要是写了一些 YOLOv1 的原版网络结构&#xff0c;这篇文章一样&#xff0c;目标是还原论文中原版的 YOLOv2 的网络结构&#xff0c;而不是后续各种魔改的版本。 YOLOv2 和 YOLOv1 不一样&#xff0c;开始使用 Darknet-19 来作为 backbone 了。论文中给出了 Darkne…

springboot280基于WEB的旅游推荐系统设计与实现

旅游推荐系统设计与实现 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装旅游推荐系统软件来发挥其高效地信息处理…

5-隐藏层:神经网络为什么working

声明 本文章基于哔哩哔哩付费课程《小白也能听懂的人工智能原理》。仅供学习记录、分享&#xff0c;严禁他用&#xff01;&#xff01;如有侵权&#xff0c;请联系删除 目录 一、知识引入 &#xff08;一&#xff09;隐藏层 &#xff08;二&#xff09;泛化 &#xff08;三…

深入理解浏览器的页面渲染机制

在当今的网络技术日益发展的背景下&#xff0c;网页变得越来越复杂和动态。作为开发者&#xff0c;理解浏览器如何渲染页面对于优化性能、提升用户体验至关重要。本文将深入探讨浏览器的页面渲染过程&#xff0c;包括重排&#xff08;Reflow&#xff09;和重绘&#xff08;Repa…

【Spring Cloud】SpringCloud接入SOFARegistry

背景 由于项目开发使用的是SpringCloud&#xff0c;但是甲方使用的是阿里云提供的私有云注册中心&#xff0c;需要替换注册中心。 方案 官方文档&#xff1a;Spring Cloud 使用 SOFARegistry 改造的步骤&#xff1a; 1.去掉原项目中注册中心的pom依赖引入&#xff0c;我们使…

java算法题每日多道

274. H 指数 题目 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义&#xff1a;h 代表“高引用次数” &#xff0c;一名科研人员的 h 指数 是指他&#xff08;…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Ellipse)

椭圆绘制组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Ellipse(options?: {width?: string | number, height?: string | number}) 从API version 9开始&#xff0…

数据结构知识Day1

数据结构是什么&#xff1f; 数据结构是计算机存储、组织数据的方式&#xff0c;它涉及相互之间存在一种或多种特定关系的数据元素的集合。数据结构反映了数据的内部构成&#xff0c;即数据由哪些成分数据构成&#xff0c;以何种方式构成&#xff0c;以及呈现何种结构。这种结…

谷歌发布Bard AI以与ChatGPT/GPT-4竞争

Google发布Bard AI&#xff0c;与ChatGPT/GPT-4竞争 概述 谷歌近日推出了一款名为Bard的创新型AI聊天机器人&#xff0c;旨在与OpenAI的ChatGPT和微软的Bing Chat竞争。与同类产品不同&#xff0c;Bard能够直接从其模型中生成信息&#xff0c;而不是检索搜索结果。Bard被视为…

LeetCode讲解算法1-排序算法(Python版)

文章目录 一、引言问题提出 二、排序算法1.选择排序&#xff08;Selection Sort&#xff09;2.冒泡排序3.插入排序&#xff08;Insertion Sort&#xff09;4.希尔排序&#xff08;Shell Sort&#xff09;5.归并排序&#xff08;Merge Sort&#xff09;6.快速排序&#xff08;Qu…

【Node.js从基础到高级运用】十三、NodeJS中间件高级应用

在现代web开发中&#xff0c;Node.js因其高效和灵活性而备受青睐。其中&#xff0c;中间件的概念是构建高效Node.js应用的关键。在这篇博客文章中&#xff0c;我们将深入探讨Node.js中间件的高级应用&#xff0c;包括创建自定义中间件、使用第三方中间件等。我们将从基础讲起&a…