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对象显示到场景视图上,代码如下&…...
业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
Python网页自动化Selenium中文文档
1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API,让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API,你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...
Linux入门(十五)安装java安装tomcat安装dotnet安装mysql
安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了,系统很多命…...
NLP学习路线图(三十四): 命名实体识别(NER)
一、命名实体识别(NER)是什么? 命名实体识别(Named Entity Recognition, NER)是自然语言处理中的一项关键序列标注任务。其核心目标是从非结构化的文本中自动识别出特定类别的名词性短语,并将其归类到预定义的类别中。 核心目标:找到文本中提到的命名实体,并分类。 典…...
