以前書いた記事について、今度は複数ファイルをリストとしてPOSTするやりかたをまとめます。
【SpringBoot】ファイルとその他データを同時にPostする【Axios】 - Qiita
エンドポイント
エンドポイントは以下のような形になります。
このサンプルでは配列として受け取っていますが、List<MultipartFile>として、リストの形で受け取ることもできます。
@PostMapping("/api/test")
public void create(
@RequestParam("intValue") Integer intValue,
@RequestPart("uploadFiles") MultipartFile[] multipartFile,
@RequestPart("form") @Valid SampleObject sampleObject,
BindingResult errorResult
) {
/* 内部処理 */
}
注意点
SpringBootのエンドポイントは一ファイルの容量/リクエストの総容量に制限が有るため、必要に応じてサイズ制限を緩和する必要があります。
このやり方については以下にまとめてあります。
【SpringBoot】アップロードするMultipartFileの最大サイズを変更する - Qiita
POST側
以下のコードで、「ファイルの複数選択 -> 開く or キャンセルでPOST関数を呼ぶ」形を想定しています。
<!-- 選択と同時にpostが呼ばれる、multiple指定のため複数選択できる -->
<input type="file"
@change="postFilesWithForm" multiple/>
POSTする関数は以下の通りです。
postFilesWithForm(ev) {
const formData = new FormData()
// フォームデータのサンプル
const form = {
formData: 'hogehoge'
}
// Blob化したフォームを追加
formData.append('form', new Blob(
[JSON.stringify(form)], { type: 'application/json' }
))
// ファイルを追加
Array.from(ev.target.files).forEach(file => formData.append(`uploadFiles`, file))
/* formDataを使ったPOST処理 */
}
工夫したのは以下3点です。
- JSONのデータについては
type: 'application/json'を指定する -
appendは同じプロパティに対して繰り返せばよしなに配列として扱われるため、そのまま入れる - （
FileArrayはforEachできないため、Array.from(ev.target.files)する）
以上のやり方で、ファイルの配列/リストとその他データを同時にPOSTできます。