需求
在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请求代码: