LoginSignup
14

More than 5 years have passed since last update.

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

Posted at

やること

画像などのファイルと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するコードは以下の通りです1
new Blobtype : '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スペースインデントセミコロンレススタイルです。 

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
14