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)}}) 
}

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

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

方法二：

前端：使用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)}})
}

后端

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