我想同时将file文件和data参数数据同时提交给后端,而不是分开进行提交。因为这样可以避免只上传一方而另一方没有上传。
这里依旧使用MultipartFile进行接受文件对象。但是我在提交时遇到了两个问题
问题1
后端如何同时接受文件对象和自定义引用对象?
我查阅了一些博客发现他们有的人是使用@RequestBody来接受参数对象的。但是我试了,不行。因为MultipartFile所需的请求头是
解决办法:
我使用了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' } })