使用@RequestPart处理json和文件的混合请求

前言

在处理前端发送的数据时，单一的json我们可以使用@RequestBody，单独的文件我们则可以使用@RequestParam来处理，当我们需要同时处理这两个东西的时候，又该怎么办呢？这个时候，就轮到@RequestPart了。@RequestPart可以从请求中获取复杂对象，例如文件上传时的文件和表数据。它可以指定参数名、是否必需、请求头等属性。

@RequestParam和@RequestPart的区别

@RequestPart和@RequestParam注解的区别在于它们用于从HTTP请求中获取不同类型的数据。
@RequestParam用于从请求参数中获取单个值或多个值，请求参数通常以查询字符串或者表单形式传递。@RequestParam注解可以映射这些请求参数到方法的参数中，例如@RequestParam(“param1”) String param1，表示将查询字符串中的param1参数值传递给String类型的param1参数。

@RequestPart用于从multipart/form-data类型的请求正文中获取特定部分的值，例如上传的文件。当客户端用multipart/form-data格式上传文件时，请求正文被拆分成多个部分，每个部分都有自己的名称和内容类型。在这种情况下，@RequestPart注解可以用于从特定的部分中获取内容，类似于@RequestParam注解获取请求参数的方式。

使用@RequestPart时要注意以下几点：

1. @RequestPart注解只能用于POST请求，不能用于GET请求。
2. @RequestPart注解需要配合使用multipart/form-data编码的请求体，因为这种编码方式支持上传文件和表单数据。
3. @RequestPart注解可以指定参数名、是否必需、请求头等属性。
4. @RequestPart注解可以用于处理任意类型的复杂对象，例如自定义的Java对象、Map、List等。在处理文件上传时通常使用MultipartFile类型来表示上传的文件。

@RequestPart的使用

Controller

    @PostMapping("/user")
    public R add(@RequestPart("user") String userString, @RequestPart(value = "file",required = false) MultipartFile firstFile){
        UserEntity user = JSON.parseObject(userString,UserEntity.class);
       //自己的操作
    }

Vue

1. 创建一个 FormData 对象。
2. 使用以下步骤之一将文件附加到 FormData 对象。
   1、如果文件是使用“文件”类型的输入元素上传的，则将其附加到 FormData 对象。 formData.append(“file”, document.forms[formName].file.files[0]);
   2、 直接将文件附加到 FormData 对象。 formData.append(“file”, myFile, “myfile.txt”);或者formData.append(“file”, myBob, “myfile.txt”)
3. 使用字符串化的 JSON 数据创建一个 blob，并将其附加到 FormData 对象。这会导致多部分请求中第二部分的 Content-type 为“application/json”而不是文件类型。
4. 向服务器发送请求。
5. 请求详细信息：Content-Type: undefined。这会导致浏览器将 Content-Type 设置为 multipart/form-data 并正确填充边界。手动设置 Content-Type 为 multipart/form-data 将无法填写请求的边界参数。

let formData = new FormData();
formData.append("user",JSON.stringify(this.dataForm) );
formData.append("file",this.dataForm.firstFile);
let url = `your url`            
let method = `post`
let headers ={'Content-Type': undefined};
 axios.request({
                  url: url,
                  method: method,
                  data: formData,
                  headers: headers
               }).then(res => {
					console.log(res)
				})

最后

工作中遇到的小问题，在此记录一下。