Vue + ElementUI上传带图片的表单

需求

在Vue项目中，我们可以：
1、直接通过表单的action来向后端发送请求（本篇文章后台使用PHP）
2、也可以使用axios来进行后端请求。
需要上传的表单对象：

由于我在提交表单时需要先向后端提交上传图片的申请，并存储图片到服务器，所以我采用axios的上传方式，elementui的upload直接可以通过自带的action属性请求后端上传图片，所以当我点击上传按钮时，首先执行upload的上传图片的请求。即：this.$refs.pictureUpload.submit();
注意：为el-upload设置ref="pictureUpload"属性，才能获取到upload。
这是upload上传成功的处理函数（具体实现参考elelmetui官网）

如果上传成功，后端应该返回图片的储存地址，否则返回0(自定义即可)。而前端就应该根据返回的值进行相应的处理：
（1）、收到返回地址，赋值给表单（这里将表单设置为一个对象）中的图片地址属性。然后将对象上传到后端，让后端存入数据库中
（2）、收到返回值0，不执行表单提交，提示上传失败（弹窗）。

遇到的问题：

上传图片以及检验都很顺利，但是在上传表达时遇到了一个问题：
如果时通过form的action属性上传表单，那么后端就可以直接通过表单元素的name来获取对应的值，例如$_POST[“type”]那么就是获取表单中name="type"的元素的value值。
但是我现在是通过axios将整个form对象传向后端，那么就必须将表单处理成可以让后端php能够获取到表单参数值的形式。
比如：

上图就是一个请求的例子：
前端向so.csdn.net/so/search发送了请求，且请求参数为 q:后端请求，t:空，u:空。
我开始将form对象当成参数发送给后端，发现后端并不能将收到的form对象当成一个对象来处理，即不能通过form.title的形式取到表单的值。这里我使用了 qs ,它可以格式化数据。将请求参数序列化
安装qs:

npm intsall qs

在当前页面下引用：

import qs from "qs"

使用qs格式化表单对象：

qs.stringify(this.form)

这就将一个form对象格式成了类似：

title="标题"&content="内容"&time="时间"……

格式的数据。
所以我们请求时就是

/php/insert.php?title=标题&content=内容&time=时间……

这样后台的php文件就可以直接通过$_POST[“title”]来获取前端请求的title参数的值，其他参数同理也可以获取到。
具体axios请求代码：

Vue + ElementUI上传带图片的表单相关推荐

Vue+element-ui上传logo图片到后端生成二维码展示到页面
Vue+element-ui上传logo图片生成二维码展示到页面该文章将介绍如何通过前端上传二维码logo图片在后台生成二维码,并将生成的二维码转换成Base64编码返回给前端在页面展示,用户扫码二 ...
Vue elementui 上传前获取图片宽度尺寸和大小
Vue elementui 上传前获取图片宽度尺寸和大小项目中用到elementui上传组件,但是on-change钩子函数中file参数只能拿到文件名字和大小, 如果是图片就拿不到图片的宽高,不符 ...
vue+elementui上传头像
vue+elementui上传头像 vue页面中: <el-form :model="form"><el-form-item label="路径&quo ...
小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
Java使用FreeMarker自动生成Word文档（带图片和表单）
Java使用FreeMarker自动生成Word文档(带图片和表单) 1 背景 2 目标效果 3 创建Word模板 3.1 创建模板文档 3.2 转换模板文档 3.3 处理模板文档中的占位符 3.4 ...
vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现
vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现表单验证规则: 重置表单和对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...
java vue elementui 上传照片墙
批量上传图片后端使用的是java,前端使用vue+elementui. 前端部分首先要设置组件中auto-upload属性为false,取消自动上传,multiple属性为true,支持多文件上传 ...
java form 上传文件_java通过表单进行文件上传的几种方法
上传文件的分类: 无论什么方式上传文件,都要用post提交方式一: 前端:表单方式上传文件后端: 使用上传技术是apache中的Commons-fileupload.jar commons-io. ...
Vue文件上传和图片上传实例
图片上传 1.先通过组件库选择对应的文件上传组件,或者自行封装的组件,示例选的的Ant Design Vue组件库. 代码: <a-uploadaction="xxxxxxxxx&qu ...

Vue + ElementUI上传带图片的表单

需求

遇到的问题：

Vue + ElementUI上传带图片的表单相关推荐

最新文章

热门文章