post请求同时上传文件并传递其他参数的前后端写法

最近有一需求，post请求从前端上传一个文件同时传递一个参数，多次实验后记录下两种写法：

方法一：

前端：重点是设置请求头代码如下：

getfile(event) {
    //input框输入文件
    let file = event.target.files[0];
    let type="其他参数"
 
    //调用上传接口
    this.$http.post("/upload",
        {
            file,type
        },
        {
            headers: {
                'Content-Type': 'multipart/form-data' //重点：设置请求头
            }
        }
    ).then(res => {
        if (res.data.code == 200) {
            this.$message.success(res.data.message)
          //上传成功回调
        } else {
            this.$message.error(res.data.message)
        }
    }) 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

后端：重点是接受传参时不指定 @RequestParam 或者 @RequestBody，代码如下图

 @PostMapping(value = "/upload")
  public Result<String> fileUpload( MultipartFile file,String type) throws IOException {
        //可接收到参数 file 和 type
	 }
1
2
3
4

方法二：

前端：使用new FormData()进行封装

getFile(event) {
    let file = event.target.files[0];
    const formData = new FormData()
    formData.append('file',file)
    formData.append('type', "其他参数")
    this.$http.post("/upload", formData).then(res => {
        if (res.data.code == 200) {
            this.$message.success(res.data.message)
            //上传成功回调
            
        } else {
            this.$message.error(res.data.message)
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

后端

	 @PostMapping(value = "/upload")
	 public Result<String> fileUpload(@RequestParam(name = "file") MultipartFile file,
							  @RequestParam(name = "type", required = false) String type) throws IOException {
		//可接收参数 file 和 type
}
1
2
3
4
5