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

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.点击【上传图片】按钮择本地图片&#xff08;只能选择一张图片&#xff09;后。   2.点击图片&#xff0c;支持放大查看。   3.点击【保存】按钮&#xff0c;提交表单。 页面效果 前端代码…...

Android 15 第一个开发者预览版

点击查看&#xff1a;first-developer-preview-android15 点击查看&#xff1a;Get Android 15 2024年2月16日,谷歌发布 Android 15 第一个开发者预览版 翻译 由工程副总裁戴夫伯克发布 今天&#xff0c;我们发布了Android 15的首个开发者预览版&#xff0c;这样我们的开发者就…...

anomalib1.0学习纪实-续1:增加新算法

0、基本信息 现在我要增加一个新算法&#xff1a;DDAD 他的代码&#xff0c;可以在github中找到&#xff1a;GitHub - arimousa/DDAD 一、基础操作&#xff1a; 1、修改anomalib\src\anomalib\models\__init__.py 我增加的第33行和61行&#xff0c; 2、 增加ddad文件夹和文…...

Java+Vue+MySQL,国产动漫网站全栈升级

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

机器人常用传感器分类及一般性要求

机器人传感器的分类 传感技术是先进机器人的三大要素&#xff08;感知、决策和动作&#xff09;之一。根据用途不同&#xff0c;机器人传感器可以分为两大类&#xff1a;用于检测机器人自身状态的内部传感器和用于检测机器人相关环境参数的外部传感器。 内部传感器 内部传感…...

C++-opencv的imread、imshow、waitkey、namedWindow

在C中使用OpenCV时&#xff0c;imread和imshow是两个非常基础且常用的函数&#xff0c;用于读取图像和显示图像。以下是这两个函数的简要说明和如何一起使用它们的示例。 imread函数 imread用于从指定的文件路径读取图像。它将图像读入为cv::Mat对象&#xff0c;这是OpenCV中…...

开源语音识别faster-whisper部署教程

1. 资源下载 源码地址 模型下载地址&#xff1a; large-v3模型&#xff1a;https://huggingface.co/Systran/faster-whisper-large-v3/tree/main large-v2模型&#xff1a;https://huggingface.co/guillaumekln/faster-whisper-large-v2/tree/main large-v2模型&#xff1a;…...

使用IntelliJ IDEA配置Maven (入门)

在使用IntelliJ IDEA进行Java开发时&#xff0c;配置Maven是至关重要的一步&#xff0c;因为它可以帮助你管理项目的依赖和构建过程。以下是我在使用IntelliJ IDEA配置Maven的实践过程&#xff0c;以及一些技术笔记和职场感悟。 工作实践与项目复盘 下载Maven&#xff1a; 访问…...

汽车金融市场研究:预计2029年将达到482亿美元

汽车金融公司作为汽车流通产业链的重要一环&#xff0c;认真贯彻落实国家有关政策&#xff0c;采取多种措施助力汽车产业发展&#xff0c;为促进推动汽车消费、助力畅通汽车产业链、支持稳定宏观经济大盘发挥了积极作用。 益于国内疫情得到有效控制&#xff0c;我国经济持续稳定…...

关于举办第十五届蓝桥杯大赛电子赛5G全网规划与建设赛项的通知

关于举办第十五届蓝桥杯大赛电子赛 5G全网规划与建设赛项的通知 各相关院校&#xff1a; 第十五届蓝桥杯大赛通知已于2023年9月27日在蓝桥杯大赛官网发布&#xff0c;现就电子赛5G全网规划与建设赛项报名事宜&#xff0c;公布如下&#xff1a; 一、赛项概述 5G全网规划与建设…...

Vue3快速上手(七) ref和reactive对比

一、ref和reactive对比 表格形式更加直观吧&#xff1a; 项目refreactive是否支持基本类型支持不支持是否支持对象类型支持支持对象类型是否支持属性直接赋值不支持&#xff0c;需要.value支持是否支持直接重新分配对象支持&#xff0c;因为操作的.value不支持&#xff0c;需…...

8、内网安全-横向移动RDPKerberos攻击SPN扫描WinRMWinRS

用途&#xff1a;个人学习笔记&#xff0c;有所借鉴&#xff0c;欢迎指正 目录 一、域横向移动-RDP-明文&NTLM 1.探针服务&#xff1a; 2.探针连接&#xff1a; 3.连接执行&#xff1a; 二、域横向移动-WinRM&WinRS-明文&NTLM 1.探针可用&#xff1a; 2.连接…...

《数据结构与算法之美》读书笔记

《数据结构与算法之美》读书笔记 写在前面 这本书的大部分内容比较浅显&#xff0c;因此只挑DSAA课程上没有涉及或没有深入讨论的点总结 第二章 数组相关 提高传统数组插入/删除数据效率的方法&#xff1a; 如果插入的数据不要求有序&#xff0c;可以直接把某位的原数据替换…...

C语言—字符数组(3)

可能不是那么的完整&#xff0c;先凑合看吧&#xff0c;如果我学会如何修改以后&#xff0c;我慢慢回来修改的 1.编写程序实现对两个字符串的连接功能&#xff1b; 法一:不使用strcat函数,写程序直接实现&#xff0c;记得添加结束符&#xff0c;不然程序访问数组时候将变得不…...

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. 界面布局 先看基本窗口布局&#xff0c;基本窗口情况如下&#xff1a; 就基本窗口布局的情况来看&#xff0c;某种意义上跟blender更像一点&#xff08;与3ds max相比&#xff09;。 那么有朋友就说了&#xff0c;玛格基&#xff0c;那blender最下面的时间轴哪里去了&…...

IO 流分类

一、File File 类&#xff08;磁盘操作&#xff09;可以用于表示文件和目录的信息&#xff0c;但是它不表示文件的内容。递归地列出一个目录下所有文件&#xff1a; public static void listAllFiles(File dir) {if (dir null || !dir.exists()) {return;}if (dir.isFile())…...

JVM的主要组成部分,以及它们的作用。JVM中的内存区域有哪些,它们各自的作用是什么?什么是Java的堆内存,它如何影响程序的性能?

JVM的主要组成部分&#xff0c;以及它们的作用 JVM&#xff08;Java虚拟机&#xff09;的主要组成部分包括类加载器&#xff08;Class Loader&#xff09;、运行时数据区&#xff08;Runtime Data Area&#xff09;、执行引擎&#xff08;Execution Engine&#xff09;、本地库…...

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&#xff0c;大小为426KB的svg格式的图片构造QGraphicsSvgItem对象&#xff0c;再通过Qt的Graphics View Framework框架&#xff0c;将QGraphicsSvgItem对象显示到场景视图上&#xff0c;代码如下&…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...