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

Question

After days of attempting to upload a file using a React frontend and Spring Boot backend, I'm coming here to see if anyone can guide me in the right direction. Everything seems to be in place - I select my file, I see the file properties in the console, and I see form data being passed to the REST API, but I still get an error.

Some React snippets:

 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}/>

Some Spring Boot snippets:

@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 data for console.log(fileAttachment):

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

Request sent to rest api:

-----------------------------174062142330182702901981377266
Content-Disposition: form-data; name="file"

[object Object]
-----------------------------174062142330182702901981377266--

Error message in Intellij:

Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]

Answer 1

You should enable multipart in application.properties file:

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

Also, don't forget to set the 'Content-Type':'multipart/form-data' in request header while sending your request.

Answer 2

Turns out this:

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

Needed to be this:

setFileAttachment(e.target.files[0])

It's always the little things