[Spring Boot] POST file array / list and other data at the same time [Axios]

For the article I wrote earlier, this time I will summarize how to POST multiple files as a list.

[Spring Boot] Post files and other data at the same time [Axios] -Qiita

end point

The endpoint looks like this: In this sample, it is received as an array, but it can also be received as a list as List <MultipartFile>.

@PostMapping("/api/test")
public void create(
        @RequestParam("intValue") Integer intValue,
        @RequestPart("uploadFiles") MultipartFile[] multipartFile,
        @RequestPart("form") @Valid SampleObject sampleObject,
        BindingResult errorResult
) {
    /*Internal processing*/
}

important point

Since the SpringBoot endpoint has a limit on the capacity of one file / total capacity of requests, it is necessary to relax the size limit if necessary. This method is summarized below.

[Spring Boot] Change the maximum size of the uploaded Multipart File -Qiita

POST side

The following code assumes the form of "call POST function by selecting multiple files-> open or cancel".

<!--Post is called at the same time as selection, multiple can be selected because multiple is specified-->
<input type="file"
 @change="postFilesWithForm" multiple/>

The POST function is as follows.

postFilesWithForm(ev) {
  const formData = new FormData()

  //Form data sample
  const form = {
    formData: 'hogehoge'
  }

  //Add blobed form
  formData.append('form', new Blob(
    [JSON.stringify(form)], { type: 'application/json' }
  ))

  //Add file
  Array.from(ev.target.files).forEach(file => formData.append(`uploadFiles`, file))

  /*POST processing using formData*/

}

I devised the following three points.

--Specify type:'application / json' for JSON data --ʻAppend is treated as an array if it is repeated for the same property, so enter it as it is -(FileArray cannot forEach, so ʻArray.from (ev.target.files))

With the above method, you can POST an array / list of files and other data at the same time.

Articles that I used as a reference

-javascript-Unable to use forEach in file list -Codelog -[spring \ -mvc -upload multiple files \ | spring \ -mvc Tutorial](https://riptutorial.com/ja/spring-mvc/example/10366/%E8%A4%87%E6% 95% B0% E3% 81% AE% E3% 83% 95% E3% 82% A1% E3% 82% A4% E3% 83% AB% E3% 82% 92% E3% 82% A2% E3% 83% 83% E3% 83% 97% E3% 83% AD% E3% 83% BC% E3% 83% 89% E3% 81% 99% E3% 82% 8B)