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请求代码：