vue中单个页面设置多个上传组件

2024-01-25 23:04

本文主要是介绍vue中单个页面设置多个上传组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

简述:

        在最近的项目中,遇到单页面有多个上传图片的地方,如果每一个上传组件都写一个上传事件,在编码过程中又繁琐,后期维护也麻烦,最终在element-ui中找到了解决方法,在此记录一下。

html代码

<el-form-item label="背景图:"><el-uploadclass="avatar-uploader"action="":show-file-list="false"list-type="picture":http-request="Upload":data="{name:'background_ImgUrl'}":on-error="handleFailure":before-upload="beforeAvatarUpload"><div class="imgorigin" v-if="!form.background_ImgUrl"><i class="el-icon-plus first"></i><span class="second"> 上传 </span></div><imgv-if="form.background_ImgUrl":src="form.background_ImgUrl"altclass="img avatar-uploader-icon"/></el-upload><span class="logo">建议尺寸:1920*400</span>
</el-form-item>
<el-form-item label="头像:"><el-uploadclass="avatar-uploader"action="":show-file-list="false"list-type="picture":http-request="Upload":data="{name:'avator_ImgUrl'}":on-error="handleFailure":before-upload="beforeAvatarUpload"><div class="imgorigin" v-if="!form.background_ImgUrl"><i class="el-icon-plus first"></i><span class="second"> 上传 </span></div><imgv-if="form.background_ImgUrl":src="form.background_ImgUrl"altclass="img avatar-uploader-icon"/></el-upload><span class="logo">建议尺寸:1920*400</span>
</el-form-item>

图片上传,调用上传接口

注意:此处的file.data接收的参数,便是上面上传组件中定义的信息;通过拿到file.data中的数据,来判断是哪个上传弹框上传的数据,最后再根据业务需求,赋值给不同的变量

/**logo图片上传成功 */Upload(file) {console.log(file)var fileName = file.file.name;var formname = file.data.name;console.log('forname',formname)// 此处直接上传到阿里云上传接口.upload(file.file,fileName, (res) => {if (res.res.statusCode == "200") {switch(formname){case 'background_ImgUrl' :this.form.background_ImgUrl = 返回的图片路径breakcase 'avator_ImgUrl1':this.form.avatorValue_ImgUrl = 返回的图片路径break}this.$message({message: "上传成功!",type: "success",});} else {this.$message.warning("上传图片失败!");}});}

这篇关于vue中单个页面设置多个上传组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/644899

相关文章

MySQL多实例管理如何在一台主机上运行多个mysql

《MySQL多实例管理如何在一台主机上运行多个mysql》文章详解了在Linux主机上通过二进制方式安装MySQL多实例的步骤,涵盖端口配置、数据目录准备、初始化与启动流程,以及排错方法,适用于构建读... 目录一、什么是mysql多实例二、二进制方式安装MySQL1.获取二进制代码包2.安装基础依赖3.清

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.