element 表单提交图片(表单上传图片)
文章目录
- 使用场景
- 页面效果
- 前端代码
使用场景
vue2 + element 表单提交图片
1.点击【上传图片】按钮择本地图片(只能选择一张图片)后。
2.点击图片,支持放大查看。
3.点击【保存】按钮,提交表单。
页面效果

前端代码
HTML
<div style="display: flex;align-items: center;"><el-upload :accept="pic_accept" action="" :on-change="uploadChange" :show-file-list="false"><el-button size="small" type="primary">上传图片</el-button></el-upload><div class="up_sy_logo_div" style="margin-left: 15px;"><!--支持点击查看大图--><el-image v-if="ruleForm.hrefn" style="width:100px;" :src="ruleForm.hrefn" :preview-src-list="ruleForm.hrefn ? [ruleForm.hrefn] : []"></el-image></div>
</div>
Vue data
pic_accept: ".jpg,.png,.jpeg,.bmp",
pic_maxsize: "5",//单位MB
ruleForm: {hrefn: ""
},
file: [],//暂存文件
submitLoading: false,//防止重复提交
Vue methods
uploadChange(file) {if (file.status !== 'success') return;if (!this.checkFile(file)) return;this.ruleForm.hrefn = URL.createObjectURL(file.raw);// 复刻文件信息this.file = file.raw;
},
checkFile(file) {// 判断图片类型if (this.pic_type) {let picTypeArr = this.pic_type.split(',');let isImage = false;picTypeArr.forEach(item => {if (file.raw.type === 'image/' + item) {isImage = true;}});if (!isImage) {message.error('上传图片只能是 (' + this.pic_type + ') 格式!');return false;}}// 判断图片大小if (this.pic_maxsize > 0) {let isLtNumM = file.size / 1024 / 1024 < this.pic_maxsize;if (!isLtNumM) {message.error('上传图片大小不能超过 ' + this.pic_maxsize + 'MB!');return false;}}return true;
},
submitForm(formName) {let _this = this;let params = JSON.parse(JSON.stringify(this.ruleForm));let formData = new FormData();Object.keys(params).forEach((key) => {if (Array.isArray(params[key])) {params[key].forEach((v) => {formData.append(key + '[]', v);});} else {formData.append(key, params[key]);}});if (this.file.length !== 0) {formData.append('file', this.file);}_this.submitLoading = true;//httpPost 是自定义的函数httpPost('你的服务器接口URL', formData).then(function (response) {let res = response.data;if (res.error === 0) {message.success(res.msg);_this.clearForm();} else {message.error(res.msg);}//_this.$emit("child-event-list");}).catch(function (error) {console.log(error);}).finally(function () {_this.submitLoading = false;});
}
服务端 PHP接受参数
$_POST;
$_FILES['file'];
相关文章:
element 表单提交图片(表单上传图片)
文章目录 使用场景页面效果前端代码 使用场景 vue2 element 表单提交图片 1.点击【上传图片】按钮择本地图片(只能选择一张图片)后。 2.点击图片,支持放大查看。 3.点击【保存】按钮,提交表单。 页面效果 前端代码…...
Android 15 第一个开发者预览版
点击查看:first-developer-preview-android15 点击查看:Get Android 15 2024年2月16日,谷歌发布 Android 15 第一个开发者预览版 翻译 由工程副总裁戴夫伯克发布 今天,我们发布了Android 15的首个开发者预览版,这样我们的开发者就…...
anomalib1.0学习纪实-续1:增加新算法
0、基本信息 现在我要增加一个新算法:DDAD 他的代码,可以在github中找到:GitHub - arimousa/DDAD 一、基础操作: 1、修改anomalib\src\anomalib\models\__init__.py 我增加的第33行和61行, 2、 增加ddad文件夹和文…...
Java+Vue+MySQL,国产动漫网站全栈升级
✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…...
机器人常用传感器分类及一般性要求
机器人传感器的分类 传感技术是先进机器人的三大要素(感知、决策和动作)之一。根据用途不同,机器人传感器可以分为两大类:用于检测机器人自身状态的内部传感器和用于检测机器人相关环境参数的外部传感器。 内部传感器 内部传感…...
C++-opencv的imread、imshow、waitkey、namedWindow
在C中使用OpenCV时,imread和imshow是两个非常基础且常用的函数,用于读取图像和显示图像。以下是这两个函数的简要说明和如何一起使用它们的示例。 imread函数 imread用于从指定的文件路径读取图像。它将图像读入为cv::Mat对象,这是OpenCV中…...
开源语音识别faster-whisper部署教程
1. 资源下载 源码地址 模型下载地址: large-v3模型:https://huggingface.co/Systran/faster-whisper-large-v3/tree/main large-v2模型:https://huggingface.co/guillaumekln/faster-whisper-large-v2/tree/main large-v2模型:…...
使用IntelliJ IDEA配置Maven (入门)
在使用IntelliJ IDEA进行Java开发时,配置Maven是至关重要的一步,因为它可以帮助你管理项目的依赖和构建过程。以下是我在使用IntelliJ IDEA配置Maven的实践过程,以及一些技术笔记和职场感悟。 工作实践与项目复盘 下载Maven: 访问…...
汽车金融市场研究:预计2029年将达到482亿美元
汽车金融公司作为汽车流通产业链的重要一环,认真贯彻落实国家有关政策,采取多种措施助力汽车产业发展,为促进推动汽车消费、助力畅通汽车产业链、支持稳定宏观经济大盘发挥了积极作用。 益于国内疫情得到有效控制,我国经济持续稳定…...
关于举办第十五届蓝桥杯大赛电子赛5G全网规划与建设赛项的通知
关于举办第十五届蓝桥杯大赛电子赛 5G全网规划与建设赛项的通知 各相关院校: 第十五届蓝桥杯大赛通知已于2023年9月27日在蓝桥杯大赛官网发布,现就电子赛5G全网规划与建设赛项报名事宜,公布如下: 一、赛项概述 5G全网规划与建设…...
Vue3快速上手(七) ref和reactive对比
一、ref和reactive对比 表格形式更加直观吧: 项目refreactive是否支持基本类型支持不支持是否支持对象类型支持支持对象类型是否支持属性直接赋值不支持,需要.value支持是否支持直接重新分配对象支持,因为操作的.value不支持,需…...
8、内网安全-横向移动RDPKerberos攻击SPN扫描WinRMWinRS
用途:个人学习笔记,有所借鉴,欢迎指正 目录 一、域横向移动-RDP-明文&NTLM 1.探针服务: 2.探针连接: 3.连接执行: 二、域横向移动-WinRM&WinRS-明文&NTLM 1.探针可用: 2.连接…...
《数据结构与算法之美》读书笔记
《数据结构与算法之美》读书笔记 写在前面 这本书的大部分内容比较浅显,因此只挑DSAA课程上没有涉及或没有深入讨论的点总结 第二章 数组相关 提高传统数组插入/删除数据效率的方法: 如果插入的数据不要求有序,可以直接把某位的原数据替换…...
C语言—字符数组(3)
可能不是那么的完整,先凑合看吧,如果我学会如何修改以后,我慢慢回来修改的 1.编写程序实现对两个字符串的连接功能; 法一:不使用strcat函数,写程序直接实现,记得添加结束符,不然程序访问数组时候将变得不…...
linux 实用技能
1.查看系统版本 cat /etc/redhat-release cat /etc/redhat-release 2. 查看磁盘实用情况 df du 3.查看内存 top -Hp 2214 4. 网络配置 vi /etc/hostname vi /etc/hosts vi /etc/sysconfig/network-scripts/ifcfgens33 6. sed ‘s/a/b/g’ aaa.txt 替换 7. scp …...
【maya 入门笔记】基本视图和拓扑
1. 界面布局 先看基本窗口布局,基本窗口情况如下: 就基本窗口布局的情况来看,某种意义上跟blender更像一点(与3ds max相比)。 那么有朋友就说了,玛格基,那blender最下面的时间轴哪里去了&…...
IO 流分类
一、File File 类(磁盘操作)可以用于表示文件和目录的信息,但是它不表示文件的内容。递归地列出一个目录下所有文件: public static void listAllFiles(File dir) {if (dir null || !dir.exists()) {return;}if (dir.isFile())…...
JVM的主要组成部分,以及它们的作用。JVM中的内存区域有哪些,它们各自的作用是什么?什么是Java的堆内存,它如何影响程序的性能?
JVM的主要组成部分,以及它们的作用 JVM(Java虚拟机)的主要组成部分包括类加载器(Class Loader)、运行时数据区(Runtime Data Area)、执行引擎(Execution Engine)、本地库…...
Qt QWidget以及各种控件、布局 核心属性(适合入门使用时查询)
目录 1. QWidget核心属性 2. 按钮类控件 2.1 PushButton 核心属性 2.2 RadioButton 核心属性 2.3 CheckBox 和 Tool Button 核心属性 3. 显示类控件 3.1 Label 核心属性 3.2 LCDNumber 核心属性 3.3 ProgressBar 核心属性 3.4 Calendar Widget 核心属性 4. 输入类控…...
svg图片构造QGraphicsSvgItem对象耗时很长的问题解决
目录 1. 问题的提出 2. 问题解决 1. 问题的提出 今天通过一张像素为141 * 214,大小为426KB的svg格式的图片构造QGraphicsSvgItem对象,再通过Qt的Graphics View Framework框架,将QGraphicsSvgItem对象显示到场景视图上,代码如下&…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
