[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)

Recommended Posts

[Spring Boot] POST file array / list and other data at the same time [Axios]
[Spring Boot] Post files and other data at the same time [Axios]
Form and process file and String data at the same time with Spring Boot + Java
Implementation method of linking multiple images to one post and posting at the same time
Spring Boot for the first time
Draw a bar graph and a line graph at the same time with MPAndroidChart
[Spring Boot] How to refer to the property file
Behavior noticed when adding RadioButton and initial check at the same time in code
Check the behavior of getOne, findById, and query methods in Spring Boot + Spring Data JPA
Get a list of other sessions of the same user when using Redis Session in Spring Boot (2 series). Also discard it.
Until the use of Spring Data and JPA Part 2
Until the use of Spring Data and JPA Part 1
[Java] Method call error when inheritance and interface implementation are performed at the same time
How to use the same Mapper class in multiple data sources with Spring Boot + MyBatis