使用多部分表单数据的 React Spring 启动应用程序 - 所需的请求部分"文件"不存在

Question

在尝试使用React前端和Spring Boot后端上传文件数天后，我来到这里是想看看是否有人能引导我朝着正确的方向前进。一切似乎都准备好了——我选择了我的文件，我在控制台中看到了文件属性，我看到了传递给RESTneneneba API的表单数据，但我仍然得到了一个错误。

一些React片段：

const onFileChangeHandler = (e) => {
e.preventDefault();
setFileAttachment({
fileAttachment: e.target.files[0]
})};
const formData = new FormData();
formData.append('file',fileAttachment)
const requestOptionsInsertNote = {
method: "POST",
body: formData
};
<input type="file" name="file" onChange={onFileChangeHandler}/>

一些Spring Boot片段：

@PostMapping( "/api/notes/insertNote")
public void insertJournalNote(@RequestPart(value="file") MultipartFile file{
UploadedFileInfo uploadedFileInfo = new UploadedFileInfo();
try{
uploadedFileInfo.setFileData(file.getBytes());
uploadedFileInfo.setFileType(file.getContentType());
uploadedFileInfo.setFileName(file.getOriginalFilename());
}catch (IOException e){
e.printStackTrace();
}}

Console.log的控制台日志数据(文件附件(：

Object { fileAttachment: File }​
fileAttachment: File { name: "file.jpg", lastModified: 1650655091391, size: 148823, … }​​
lastModified: 1650655091391​​
name: "file.jpg"​​
size: 148823​​
type: "image/jpeg"​​
webkitRelativePath: ""

请求发送到rest api:

-----------------------------174062142330182702901981377266
Content-Disposition: form-data; name="file"
[object Object]
-----------------------------174062142330182702901981377266--

Intellij:中的错误消息

已解决[org.springframework.web.multipart.support.MissingServlet请求部分异常：所需的请求部分"文件"不存在]

Answer 1

您应该在application.properties文件中启用multipart：

spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size = -1
spring.servlet.multipart.max-request-size=-1

此外，在发送请求时，不要忘记在请求头中设置'Content-Type':'multipart/form-data'。

---

EDIT：您需要定义CommonMultipartResolverBean。

@Bean
public CommonsMultipartResolver multipartResolver() {
CommonsMultipartResolver multipart = new CommonsMultipartResolver();
multipart.setMaxUploadSize(3 * 1024 * 1024);
return multipart;
}
@Bean
@Order(0)
public MultipartFilter multipartFilter() {
MultipartFilter multipartFilter = new MultipartFilter();
multipartFilter.setMultipartResolverBeanName("multipartResolver");
return multipartFilter;
}

此外，我们似乎应该将"内容类型"留空，这样Chrome就可以自己设置边界。

Answer 2

结果是：

setFileAttachment({
fileAttachment: e.target.files[0]
})

需要这样：

setFileAttachment(e.target.files[0])

总是小事