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

VUE表单中多个el-upload上传组件共享回调函数解决方案

news 文章来源：https://blog.csdn.net/mapboo/article/details/135667532 2025/5/10 18:04:31

产品需求界面：

在产品配置页面表单中需要上传多个图片，项目中上传组件采用Element Plus 中的 el-upload，目前问题是每个上传组件都需要实现自己的回调，比如:on-change，采用官方推荐标准代码如下：

  <el-form-item label="站点图标"><el-upload action="#" list-type="picture-card" accept="image/*" :auto-upload="true":show-file-list="false" :on-change="handleChange" :before-upload="handleBeforeUpload"><el-image v-if="form.logourl" :src="form.logourl" fit="contain" class="avatar" /><el-icon v-else><Plus /></el-icon></el-upload></el-form-item>
const handleChange = (uploadFiles, uploadFiles) => {console.log('handle Change', uploadFile.url, uploadFiles);form.logourl = uploadFile.url;
};

由于此项目中同一个el-form中用了三个上传组件，如果每一个都写回调，需要写多个不同的回调拿到这个图片url显示出来，比较麻烦，现在需要的效果是三个上传组件的change事件回调采用一个回调函数，具体实现如下，直接代码展示：

 <el-form-item label="站点图标"><el-upload action="#" list-type="picture-card" accept="image/*" :auto-upload="true":show-file-list="false" :on-change="function (uploadFile, uploadFiles) {return handleChange(uploadFile, uploadFiles, 'logo')}" :before-upload="handleBeforeUpload"><el-image v-if="form.logourl" :src="form.logourl" fit="contain" class="avatar" /><el-icon v-else><Plus /></el-icon></el-upload></el-form-item>
const handleChange = (uploadFile, uploadFiles, uploadType) => {console.log('handle Change', uploadFile.url, uploadFiles, uploadType);switch (uploadType) {case 'logo': {form.logourl = uploadFile.url;}break;case 'wx': {form.wxurl = uploadFile.url;}break;case 'gzh': {form.gzhurl = uploadFile.url;}break;}};

核心代码解释：

:on-change="function (uploadFile, uploadFiles) {return handleChange(uploadFile, uploadFiles, 'logo')}"

这段代码是将一个匿名函数作为 :on-change 属性的值，该函数接收两个参数：uploadFile 和 uploadFiles。在函数体内，它调用了名为 handleChange() 的方法，并传递了三个参数：uploadFile、uploadFiles 和 'logo'。

具体而言，这段代码的作用是在上传组件的 :on-change 事件中触发 handleChange() 方法，并将当前上传的文件对象 uploadFile、已上传文件数组 uploadFiles 和字符串 'logo' 作为参数传递给 handleChange() 方法，这样的设计可以在处理多个上传组件时，根据不同的文件类型进行不同的操作或逻辑处理。

效果如下：

相关文章：

VUE表单中多个el-upload上传组件共享回调函数解决方案

产品需求界面&#xff1a; 在产品配置页面表单中需要上传多个图片&#xff0c;项目中上传组件采用Element Plus 中的 el-upload&#xff0c;目前问题是每个上传组件都需要实现自己的回调&#xff0c;比如:on-change&#xff0c;采用官方推荐标准代码如下&#xff1a; <el-fo…...

编程日记 2024/1/21 10:12:16

Opencv4快速入门笔记

opencv4 一、数据载入显示和储存 1.Mat类 cv::Mat a(640,480,CN_8UC3); //640*480 3通道 cv::Mat a(Size(480,640),CV_8UC1); Mat m a.clone();//克隆 Mat b (a,Range(2,5),Range(3,5));//截取a中2-5行&#xff0c;3-5列 Mat b(2,2,CV_8UC3,Scalar(0,0,255));//构造时赋值…...

编程日记 2024/1/21 10:11:15

three.js 点按钮,相机飞行靠近观察设备

效果&#xff1a; 点击按钮或直接点击模型都可以实现运动效果 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"><…...

编程日记 2024/1/21 10:10:14

什么情况下物理服务器会运行出错？

​　　物理服务器&#xff0c;也称为裸机服务器&#xff0c;一般可以提供高性能计算水平和巨大的存储容量。然而&#xff0c;它们也难免会遇到一些问题。运行出错时&#xff0c;可能会导致停机和数据丢失。在这篇文章中&#xff0c;介绍了常见的物理服务器在一些情况下显示出错…...

编程日记 2024/1/21 10:05:10

配置免费的SSL

1 引言 本文介绍了如何在 Linux 环境下使用免费的 Let’s Encrypt 为你的网站配置 SSL 证书的方法&#xff0c;以及如何在 Nginx 服务器中启用 SSL。对于需要在自己的网站上启用 HTTPS 的用户来说非常实用。 2 SSL 简介 SSL&#xff0c;全称为 Secure Sockets Layer&#xf…...

编程日记 2024/1/21 9:59:05

（2）(2.1) Andruav Android Cellular（一）

文章目录 前言 1 Andruav 是什么&#xff1f; 2 Andruav入门 3 Andruav FPV 4 Andruav GCS App​​​​​​​ 前言 Andruav 是一个基于安卓的互联系统&#xff0c;它将安卓手机作为公司计算机&#xff0c;为你的无人机和遥控车增添先进功能。 1 Andruav 是什么&#xff…...

编程日记 2024/1/21 9:56:02

[GN] Vue3.2 快速上手 ---- 核心语法(终章)_3

文章目录 路由器工作模式命名路由to的三种写法嵌套路由路由传参query参数params参数 路由的props配置replace 和 push编程式导航重定向 总结 路由器工作模式 history模式 优点&#xff1a;URL更加美观&#xff0c;不带有#&#xff0c;更接近传统的网站URL。 缺点&#xff1a;后…...

编程日记 2024/1/21 9:55:01

在k8s上部署ClickHouse

概述 clickhouse的容器化部署&#xff0c;已经有非常成熟的生态了。在一些互联网大厂也已经得到了大规模的应用。 clickhouse作为一款数据库&#xff0c;其容器化的主要难点在于它是有状态的服务&#xff0c;因此&#xff0c;我们需要配置PVC。 目前业界比较流行的部署方式有…...

编程日记 2024/1/21 9:51:57

快速入门：使用 Gemini Embeddings 和 Elasticsearch 进行向量搜索

Gemini 是 Google DeepMind 开发的多模态大语言模型家族&#xff0c;作为 LaMDA 和 PaLM 2 的后继者。由 Gemini Ultra、Gemini Pro 和 Gemini Nano 组成&#xff0c;于 2023 年 12 月 6 日发布&#xff0c;定位为 OpenAI 的竞争者 GPT-4。 本教程演示如何使用 Gemini API 创建…...

编程日记 2024/1/21 9:44:50

【网络安全】-入门版

secure 一、基本工具1、metasploit framework ps.本着兴趣爱好&#xff0c;加强电脑的安全防护能力&#xff0c;并严格遵守法律和道德规范。一、基本工具 1、metasploit framework msf&#xff08;metasploit framework&#xff09;是一个开源的渗透测试框架&#xff0c;用于…...

编程日记 2024/1/21 9:42:49

Elasticsearch各种高级文档操作3

本文来记录几种Elasticsearch的文档操作 文章目录 初始化文档数据聚合查询文档概述对某个字段取最大值 max 示例对某个字段取最小值 min 示例对某个字段求和 sum 示例对某个字段取平均值 avg 示例对某个字段的值进行去重之后再取总数 示例 State 聚合查询文档概述操作实例 桶聚…...

编程日记 2024/1/21 9:36:44

【算法题】66. 加一

题目 给定一个由 整数 组成的 非空 数组所表示的非负整数&#xff0c;在该数的基础上加一。 最高位数字存放在数组的首位&#xff0c; 数组中每个元素只存储单个数字。 你可以假设除了整数 0 之外&#xff0c;这个整数不会以零开头。 示例 1&#xff1a; 输入&#xff1a;…...

编程日记 2024/1/21 9:35:44

查看服务器资源使用情况

查看服务器资源使用情况 一、top命令二、理解IOPS三、腾讯云机器cvm四、iotop五、atop六、查看内存使用情况一、top命令 "top"命令是一个Linux系统的实用工具，用于动态监视系统的运行状态。它会实时显示系统中正在运行的进程列表，并按照CPU使用率、内存使用率等指…...

编程日记 2024/1/21 9:34:43

锐浪报表 Grid++Report 明细表格标题重复打印

一、问题提出 锐浪报表 GridReport&#xff0c;打印表格时&#xff0c;对于明细表格的标题&#xff0c;打开换页时&#xff0c;需要重复打印明细表格的标题&#xff0c;或取消打印明细表格的标题。见下表&#xff1a; 首页&#xff1a; 后续页&#xff1a;&#xff08;无明细表…...

编程日记 2024/1/21 9:29:36

编程笔记 html5cssjs 048 CSS链接

编程笔记 html5&css&js 048 CSS链接 一、设置链接样式二、文本装饰三、背景色四、链接按钮五、练习小结 通过 CSS&#xff0c;可以用不同的方式设置链接的样式。 一、设置链接样式 链接可以使用任何 CSS 属性&#xff08;例如 color、font-family、background 等&…...

编程日记 2024/1/21 9:28:34

Spring DI

目录 什么是依赖注入 属性注入 构造函数注入 Setter 注入 依赖注入的优势 什么是依赖注入 依赖注入是一种设计模式&#xff0c;它通过外部实体&#xff08;通常是容器&#xff09;来注入一个对象的依赖关系&#xff0c;而不是在对象内部创建这些依赖关系。这种方式使得对象…...

编程日记 2024/1/21 9:26:33

CorelDRAW Graphics Suite2024专业图形设计软件Mac/Windows版

以激情为创造动力&#xff0c;以目的为设计导向。“对专业的图形设计人士来说&#xff0c;CorelDRAW 是市面上最易于使用的软件。 我用它设计过标牌、横幅、T 恤&#xff0c;甚至 45 英尺长的房车图形&#xff01;” 使用 CorelDRAW 全新的聚焦模式&#xff0c;现在可以单独编…...

编程日记 2024/1/21 9:19:27

如何本地部署虚拟数字克隆人 SadTalker

环境&#xff1a; Win10 SadTalker 问题描述&#xff1a; 如何本地部署虚拟数字克隆人 SadTalker 解决方案&#xff1a; SadTalker&#xff1a;学习逼真的3D运动系数&#xff0c;用于风格化的音频驱动的单图像说话人脸动画 单张人像图像&#x1f64e; ♂️音频&#x1f3…...

编程日记 2024/1/21 9:16:24

电容充电时间的计算

电容充电时间的计算公式有两种。一种用于已知V0&#xff0c;Vu&#xff0c;Vt&#xff0c;R和C的情况&#xff0c;另一种用于已知E&#xff0c;R和C的情况。 当已知V0&#xff0c;Vu&#xff0c;Vt&#xff0c;R和C时&#xff1a; 设 V0 为电容上的初始电压值设 Vu 为电容充满…...

编程日记 2024/1/21 9:14:22

MicroPython核心（1）：源码获取、编译构建

本文介绍了MicroPython在主要平台进行构建的基本方法&#xff0c;包括如何进行版本控制、获取和构建移植的源代码、构建文档、运行测试&#xff0c;以及MicroPython代码库的目录结构。 使用git进行源码管理 MicroPython托管在GitHub上&#xff0c;并使用Git进行源码管理。在进…...

编程日记 2024/1/21 9:10:10

pyspark之Structured Streaming file文件案例1

# generate_file.py # 生成数据 生成500个文件,每个文件1000条数据 # 生成数据格式&#xff1a;eventtime name province action ()时间 用户名 省份 动作) import os import time import shutil import time FIRST_NAME [Zhao, Qian, Sun, Li, Zhou, Wu, Zheng, Wang] SEC…...

编程日记 2024/1/21 9:02:04

虚幻UE 特效-Niagara特效实战-雨天

回顾Niagara特效基础知识&#xff1a;虚幻UE 特效-Niagara特效初识 其他两篇实战&#xff1a;虚幻UE 特效-Niagara特效实战-火焰、烛火、虚幻UE 特效-Niagara特效实战-烟雾、喷泉 本篇笔记我们再来实战雨天&#xff0c;雨天主要用到了特效中的事件。 文章目录 一、雨天1、创建雨…...

编程日记 2024/1/21 8:59:01

k8s 集群搭建的一些坑

k8s集群部署的时候会遇到很多的坑&#xff0c;即使看网上的文档也可能遇到各种的坑。 安装准备 1、虚拟机两台&#xff08;ip按自己的网络环境相应配置&#xff09;(master/node) 192.168.100.215 k8s-master 192.168.100.216 k8s-node1 2、关闭防火墙(master/node) system…...

编程日记 2024/1/21 8:50:55

SpringMVC传递数据给前台

SpringMVC有三种方式将数据提供给前台 第一种 使用Request域 第二种 使用Model&#xff08;数据默认是存放在Request域中&#xff09; 与第一种方式其实是一致的 第三种 使用Map集合&#xff08;数据默认是存放在Request域中&#xff09;...

编程日记 2024/1/21 8:46:50

国标GB28181安防视频监控EasyCVR级联后上级平台视频加载慢的原因排查

国标GB28181协议安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;同时还…...

编程日记 2024/1/21 8:45:49

React16源码: React中的HostComponent HostText的源码实现

HostComponent & HostText 1 &#xff09;概述 HostComponent 就是我们dom原生的这些节点, 如: div, span, p 标签这种 使用的是小写字母开头的这些节点一般都认为它是一个 HostComponent HostText&#xff0c;它是单纯的文本节点主要关注它们的一个更新过程 2 &#xf…...

编程日记 2024/1/21 8:40:45

Unity3D代码混淆方案详解

背景 Unity引擎使用Mono运行时&#xff0c;而C#语言易受反编译影响&#xff0c;存在代码泄露风险。本文通过《QQ乐团》项目实践&#xff0c;提出一种适用于Unity引擎的代码混淆方案&#xff0c;以保护代码逻辑。 引言 在Unity引擎下&#xff0c;为了防止代码被轻易反编译&a…...

编程日记 2024/1/21 8:34:40

安科瑞应急疏散照明系统在歌舞娱乐等场所的应用

首先必须明确疏散照明并不包含疏散指示标志&#xff0c;疏散照明是为了提供人员疏散时的必要照明&#xff0c;必须达到规定照度&#xff0c;以便逃生时看清逃生的路径&#xff0c;避免出现恐慌及踩踏事故&#xff0c;而疏散指示标志则是提供疏散路径方向引导的&#xff0c;所以…...

编程日记 2024/1/21 8:33:40

Go语言协程使用

主协程执行打印&#xff0c;子协程不打印 package main import ("fmt" )func do(i int) {fmt.Println("执行中") } func main() {fmt.Println("main协程")go do(1)fmt.Println("执行完了") }//main协程 //执行完了子协程没有打印输出…...

编程日记 2024/1/21 8:31:38

JAVA如何创建对象

在 Java 中创建对象的步骤如下&#xff1a; 定义一个类&#xff1a;在 Java 中&#xff0c;所有的对象都是通过类来创建的。因此&#xff0c;首先需要定义一个类&#xff0c;即描述对象的属性和行为。 声明变量&#xff1a;要创建一个对象&#xff0c;需要先声明一个变量来保存…...

编程日记 2024/1/21 8:29:36