我想同时将file文件和data参数数据同时提交给后端,而不是分开进行提交。因为这样可以避免只上传一方而另一方没有上传。
这里依旧使用MultipartFile进行接受文件对象。但是我在提交时遇到了两个问题
问题1
后端如何同时接受文件对象和自定义引用对象?
我查阅了一些博客发现他们有的人是使用@RequestBody来接受参数对象的。但是我试了,不行。因为MultipartFile所需的请求头是'multipart/form-data'
而@RequestBody所需的请求头是application/json
,所以这两个不能一起使用。
解决办法:
我使用了gson将json转换成java对象,这样在接受参数时我只需要接受String类型的参数就可以了
问题2
在service层对文件操作
我将对文件的操作放到了service层进行处理,但是一直报文件找不到异常。在查阅了资料后,发现是因为MultipartFile在接收参数时会创建一个临时文件,离开controller层时会对临时文件进行销毁。所以报文件找不到异常
解决办法:
可以将文件转换为输入流,传到service层,然后在service层在对其操作,这样就可以将文件数据长时间保存下来
@SneakyThrows
@PostMapping("/add")
public JsonResult add(@RequestParam("file") MultipartFile file,@RequestParam("kiwi") String kiwi){
//json->java对象
Gson gson=new Gson();
Kiwi data=gson.fromJson(kiwi,Kiwi.class);
//获取文件后缀
String suffix= file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf('.'));
return kiwiService.add(file.getInputStream(),suffix,data);
}
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency>
前端
const formData = new FormData();
const fileInput = document.querySelector('#file-input');
const file = fileInput.files[0];
formData.append('file', file);
formData.append('kiwi', JSON.stringify(this.kiwi));
console.log(formData)
this.$axios.post("/kiwi/add", formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})