我想将表单内的文件上传到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和多部分的混合。
解
该问题的解决方案是在前端使用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)。那应该解决问题。
参考方案
是的,您只需通过包装器类即可。
1)创建一个Class
来保存表单数据:
public class FormWrapper {
private MultipartFile image;
private String title;
private String description;
}
2)创建用于提交数据的HTML form
:
<form method="POST" enctype="multipart/form-data" id="fileUploadForm" action="link">
<input type="text" name="title"/><br/>
<input type="text" name="description"/><br/><br/>
<input type="file" name="image"/><br/><br/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
3)创建一种方法来接收表单的text
数据和multipart
文件:
@PostMapping("/api/upload/multi/model")
public ResponseEntity<?> multiUploadFileModel(@ModelAttribute FormWrapper model) {
try {
// Save as you want as per requiremens
saveUploadedFile(model.getImage());
formRepo.save(mode.getTitle(), model.getDescription());
} catch (IOException e) {
return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
}
return new ResponseEntity("Successfully uploaded!", HttpStatus.OK);
}
4)保存file
的方法:
private void saveUploadedFile(MultipartFile file) throws IOException {
if (!file.isEmpty()) {
byte[] bytes = file.getBytes();
Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
Files.write(path, bytes);
}
}
javascript popupwindow之后的行如何工作? - javascript好的,我有一个来自后面代码的方法,可以创建一个popupwindow。然后有一行代码要在那之后执行,我想知道那行代码何时执行,是在使用popupwindow之后执行还是在创建popupwindow之后执行?例如:void exPopupWindowMethod() { string scr = "window.open('exampleP…
Javascript-Urls的奇怪字符串比较行为 - javascript最近,在编写我无法理解的javascript时遇到了字符串比较的问题。我从完全相同的网址创建了两个字符串,当我比较它们时返回false,但是在重新分配相同的字符串后,比较返回true。这是我的示例:var str1 = "http://google.com/"; var str2 = "http://google.com/…
Javascript-从当前网址中删除查询字符串 - javascript单击提交按钮后,我需要从网址中删除查询字符串值。我可以用jQuery做到这一点吗?当前网址:siteUrl/page.php?key=value 页面提交后:siteUrl/page.php 实际上,我已经从另一个带有查询字符串的页面着陆到当前页面。我需要在页面首次加载时查询字符串值以预填充一些详细信息。但是,一旦我提交了表格,我就需要删除查询字符串值。我已…
Mongo汇总 - javascript我的收藏中有以下文件{ "_id": ObjectId("54490b8104f7142f22ecc97f"), "title": "Sample1", "slug": "samplenews", "cat": …
从控制器以视图(javascript)访问会话 - javascript这是我的控制器代码。我想获取视图中存储在会话中的值(JavaScript代码) decimal.TryParse(permotion.PROMOTION_AMOUNT.ToString(), out promotionAmount); int.TryParse(permotion.PROMOTION_TYPE_ID.ToString(CultureInfo.…