axios的Post请求对于上传文件与对象多参数的解决

前情提要

今天在自己写项目的时候，遇到了一个功能需求，碰壁了一下午，特地来记录一下，使用axios如何做到在post请求的前提下可以同时上传文件与对象。

解决问题切入点

首先我们需要知道一个知识概念，在上传文件时，axios的请求头与平时上传对象的请求头是不同的，这也是造成容易出现问题的关键所在。

上传文件的请求头
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'

一般对象的请求头
"Content-type","application/json; charset=utf-8"

 对于这两个不同的请求头，后端的接收方式也是有很大的不同。具体的可以看一下的区别

@RequestBody和@RequestParam区别

一般的我们接收Post请求都是使用@RequestBody，这是因为一般的post请求，我们传递的都是json的请求头，但是这次需求不一样，应该根据上传文件选择 @RequestParam进行接收。

前端发送请求

同时我们在前端传递的时候可以使用formData进行统一的传递

var formData = new FormData();
formData.append("file", param.file);
formData.append("videoeditform",JSON.stringify(this.videoeditform));

然后我们可以将formData放入axios中，我们有个地方需要注意的是，formdata的append会把一般的对象转成字符串，所以我们得提前使用JSON.stringify进行json字符串的转换。自此前端应该就没什么问题了。

后端接收

来到后端的接收

public R editVideoInfo(@RequestParam("file") MultipartFile file,@RequestParam("videoeditform") String videoEditInfo)

就跟前面说的，我们使用 @RequestParam接收，自此file就可以成功接收到，我们把目光放到后面对象的接收，一开始的时候，我以为springboot会很智能得将这个json字符串转换成我想要的对象，但是可惜，我用对应的对象接收就报错了，说接收参数应该是字符串，所以没办法只能用String接收，但是这就需要我们将json字符串转换成对象，这个过程就简单了，直接上代码。

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;


JSONObject jsonObject=JSONObject.fromObject(videoEditInfo);
        VideoEditInfo editvideo  = (VideoEditInfo) JSONObject.toBean(jsonObject, VideoEditInfo.class);

结尾

自此问题解决，接着打业务逻辑！解决bug一定要一步一步来，不能着急！yjs