vue + element-UI 实现图片嵌在表单里，图片和表单一起上传

⭐️个人博客：caohongyuan.com，更多分享，欢迎浏览！⭐️

如下图，需求要实现点击一个按钮，可以让表单的内容和图片一起上传，只请求后台一次！

思路：

1.让图片formData放在表单formData中一起上传，实现不了，目前前台获取不到图片的本地地址；

2.让图片的 vm.$refs.upload.submit() 放在post上传表单的函数下上传，这样会请求后台两次，并速度也很慢；

3.那就让表单formData放在图片formData中，随着图片一起上传，这个实现了，具体代码如下：

<style>input[type="file"] {display: none;}.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style>
<div class="upload-image"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name" style="width: 300px"></el-input></el-form-item><el-form-item label="上传图片" ref="uploadElement" prop="imageUrl"><el-input v-model="ruleForm.imageUrl" v-if="false"></el-input><el-uploadclass="avatar-uploader"ref="upload":show-file-list="false"action="/index/upload":before-upload="beforeUpload":on-change="handleChange":auto-upload="false":data="ruleForm"><img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form>
</div>
<script>var uploadImageVue = new Vue({el: '.upload-image',data: {ruleForm: {name: '',imageUrl: '',},rules: {name: [{required: true, message: '请输入活动名称', trigger: 'blur'},],imageUrl: [{required: true, message: '请上传图片', trigger: 'blur'},],}},methods: {submitForm(formName) {let vm = this;this.$refs[formName].validate((valid) => {if (valid) {vm.$refs.upload.submit();} else {return false;}});},resetForm(formName) {this.$refs[formName].resetFields();this.ruleForm.imageUrl = '';},handleChange (file, fileList) {this.ruleForm.imageUrl = URL.createObjectURL(file.raw);},beforeUpload(file) {return true;},}})
</script>

中间实现了很多小技巧，比如：

1.预览图片；

2.利用input实现图片上传与否的验证。

3.样式等；

ps：更详细的讲解，欢迎浏览个人网站：曹鸿源个人站点 | www.caohongyuan.com | 一个爱生活的程序员

欢迎指导，有啥问题下面留言。

千而的大狮子~

vue + element-UI 实现图片嵌在表单里，图片和表单一起上传相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）
1.介绍本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
layui表单加文件 php_layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例...
本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: js代码如下: l ...
python表单提交文件_python3做multipart/form-data上传请求
http协议本身的原始方法不支持multipart/form-data请求,这个请求由原始方法演变而来的.multipart/form-data的基础方法是post,也就是说是由post方法来组合实现 ...
nginx delete form表单收不到参数_HTTP 文件上传的一个后端完善方案（NginX）
(给PHP开发者加星标,提升PHP技能) 转自:林伯格 https://breeze2.github.io/blog/scheme-nginx-php-js-upload-process 前言很多网 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

vue + element-UI 实现图片嵌在表单里，图片和表单一起上传

⭐️个人博客：caohongyuan.com，更多分享，欢迎浏览！⭐️

vue + element-UI 实现图片嵌在表单里，图片和表单一起上传相关推荐

最新文章

热门文章