LoginSignup
3

More than 3 years have passed since last update.

【SpringBoot】ファイルの配列/リストとその他データを同時にPOSTする【Axios】

Last updated at Posted at 2019-07-25

以前書いた記事について、今度は複数ファイルをリストとして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は同じプロパティに対して繰り返せばよしなに配列として扱われるため、そのまま入れる
  • FileArrayforEachできないため、Array.from(ev.target.files)する)

以上のやり方で、ファイルの配列/リストとその他データを同時にPOSTできます。

参考にさせて頂いた記事

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3