我想将表单内的文件上传到 Spring Boot API 端点。
UI 是用 React 编写的：
export function createExpense(formData) {
return dispatch => {
axios.post(ENDPOINT,
formData,
headers: {
'Authorization': //...,
'Content-Type': 'application/json'
}
).then(({data}) => {
//...
})
.catch(({response}) => {
//...
});
};
}
_onSubmit = values => {
let formData = new FormData();
formData.append('title', values.title);
formData.append('description', values.description);
formData.append('amount', values.amount);
formData.append('image', values.image[0]);
this.props.createExpense(formData);
}
这是java端代码：
@RequestMapping(path = "/{groupId}", method = RequestMethod.POST)
public ExpenseSnippetGetDto create(@RequestBody ExpensePostDto expenseDto, @PathVariable long groupId, Principal principal, BindingResult result) throws IOException {
//..
}
但是我在 Java 端遇到了这个异常：
org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundaryapHVvBsdZYc6j4Af;charset=UTF-8' not supported
我应该如何解决这个问题？类似的 API 端点和 JavaScript 端代码已经在工作。
笔记
我见过一个解决方案，它建议请求正文应该有 2 个属性：一个是 JSON 部分，另一个是图像。我想看看是否可以将它自动转换为 DTO。
更新 1
客户端发送的上传负载应转换为以下 DTO：
public class ExpensePostDto extends ExpenseBaseDto {
private MultipartFile image;
private String description;
private List<Long> sharers;
}
所以你可以说它是 JSON 和multipart的混合体。
解决方案
问题的解决方法是FormData在前端和ModelAttribute后端使用：
@RequestMapping(path = "/{groupId}", method = RequestMethod.POST,
consumes = {"multipart/form-data"})
public ExpenseSnippetGetDto create(@ModelAttribute ExpensePostDto expenseDto, @PathVariable long groupId, Principal principal) throws IOException {
//...
}
在前端，去掉Content-Type应该由浏览器本身决定的，并使用FormData（标准JavaScript）。那应该可以解决问题。