前言
在处理前端发送的数据时,单一的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时要注意以下几点:
- @RequestPart注解只能用于POST请求,不能用于GET请求。
- @RequestPart注解需要配合使用multipart/form-data编码的请求体,因为这种编码方式支持上传文件和表单数据。
- @RequestPart注解可以指定参数名、是否必需、请求头等属性。
- @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
- 创建一个 FormData 对象。
- 使用以下步骤之一将文件附加到 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”) - 使用字符串化的 JSON 数据创建一个 blob,并将其附加到 FormData 对象。这会导致多部分请求中第二部分的 Content-type 为“application/json”而不是文件类型。
- 向服务器发送请求。
- 请求详细信息: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)
})
最后
工作中遇到的小问题,在此记录一下。