【SpringBoot】ファイルとその他データを同時にPostする【Axios】

やること

画像などのファイルとJSONにしたデータなどをaxiosを使って同時にPOSTし、Spring側ではオブジェクトへのマッピングとバリデーションをやります。
同じようなやり方で、Spring側でパースできるデータなら何でも同時に送ることができるはずです。

実行する

Java側

エンドポイントは以下の通りです。
@RequestPartを使うのがキモです。
整数値とファイルとJSONのオブジェクトを受け取り、それぞれに関して出力を行います。

エンドポイント

@PostMapping("/api/sample")
public void sample(
        @RequestParam("intValue") Integer intValue,
        @RequestPart("file") MultipartFile multipartFile,
        @RequestPart("jsonValue") @Valid SampleObject sampleObject,
        BindingResult bindingResult
) {
    if(bindingResult.hasErrors()) {
        //エラー処理
        System.out.println(bindingResult.getAllErrors());
    }

    System.out.println(intValue);
    System.out.println(multipartFile.getOriginalFilename());
    System.out.println(sampleObject.getName());
}

受け取るオブジェクトは以下の通りです。

オブジェクト

@Getter @Setter
public class SampleObject {
    @NotBlank
    private String name;
    @NotNull
    private String description;
}

JS側

POSTするコードは以下の通りです¹。
new Blobでtype : 'application/json'を指定することがキモです。
送る内容についてはコメントを参照してください。

POST

postSample (file) { //ファイルは引数で渡してもらう
  const sampleObject = { //JSONにするオブジェクト
    name: 'name',
    description: null //descriptionをnullにすることでバリデーションに引っ掛ける
  }

  const formData = new FormData()
  formData.append('file', file)
  formData.append('jsonValue', new Blob([JSON.stringify(sampleObject)], {type : 'application/json'}))
  formData.append('intValue', '1') //intValueは1を指定

  axios.post('/api/sample', formData)
}

実行結果

送信したのは1.pngというファイルです。エラー含めちゃんと処理できていることが分かります。

[Field error in object 'jsonValue' on field 'description': rejected value [null]; codes [NotNull.jsonValue.description,NotNull.description,NotNull.java.lang.String,NotNull]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [jsonValue.description,description]; arguments []; default message [description]]; default message [must not be null]]
1
1.png
name

失敗するコード

type : 'application/jsonを指定しなければorg.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported requestpartと怒られてしまいます。
application/octet-streamというのは送信方法が指定されていないという意味で、ここにJSONを指定してやることでちゃんと動くようになります。

1. 2スペースインデントセミコロンレススタイルです。 ↩