Angular5 における multipart request の実装方法がわかりません。

前提・実現したいこと

サーバサイド: Spring Boot
フロントエンド: Angular5
画像のアップロード機能を実装するために、multipart request での通信を実装したいのですが、Angular側の書き方がわからず困っています。
詳細は下記の通りなので、分かる方ご教授よろしくお願いします。

発生している問題・エラーメッセージ

いつも通りの通信を行おうとした場合、

org.springframework.web.multipart.MultipartException: Current request is not a multipart request

と言ったように、multipart request ではないという表示が出ます。これは、Content-Type が application/json のためだと考えました。
したがって、Content-Type を multipart/form-data に変更してから通信を行ったところ、

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

というエラーが表示されます。
調べたところ、multipart request で通信を行う場合、ヘッダに boudary というのを加えなくてはいけないようなのですが、値は自動で生成される値なので、自分で設定することもできません。
Angular5 での通信方法がわからず質問した次第です。

該当のソースコード

typeScript
1pushFileToStorage(file: File, http: HttpClient) {
2    let formdata: FormData = new FormData();
3    formdata.append('file', file);
4    this.headers = this.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN'));
5    // this.headers = this.headers.set('Content-Type', 'application/json');
6    this.headers = this.headers.set('Content-Type', 'multipart/form-data');
7    http.post(this.hostname + "settings/me/icon", formdata, { withCredentials: true, headers: this.headers, responseType: 'text'}).subscribe(
8      id => {
9      },
10      error => {
11      }
12    );
13  }

java
1@PostMapping(value = "me/icon")
2@ResponseStatus(HttpStatus.CREATED)
3public ResponseEntity<String> handleFileUpload(@AuthenticationPrincipal User user, @RequestParam("file") MultipartFile file) {
4    String message = "";
5    try {
6	    settingLogic.store(user.getEmployeeNumber(), file);
7	    files.add(file.getOriginalFilename());
8	    message = "You successfully uploaded " + file.getOriginalFilename() + "!";
9	    return ResponseEntity.status(HttpStatus.OK).body(message);
10    } catch (Exception e) {
11	    message = "FAIL to upload " + file.getOriginalFilename() + "!";
12	    return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(message);
13    }
14}

以上になります。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

サーバーとの通信での問題になるため、何度か試行錯誤をしてもらうことになるとは思いますが、可能性のあるポイントを挙げさせていただきます。

まず、一点目として、HttpClientでは基本的に自前でのContent-Typeの設定は不要です

HttpClient#postメソッドは第２引数のオブジェクトの型に応じて自動で推論されます。FormDataのインスタンスであればブラウザが適切なものを適用します。

これは、Content-Type が application/json のためだと考えました。

ちなみに、これは実際にapplication/jsonでしたか？

投稿2018/03/16 05:24

laco

総合スコア155

nerianighthawk

2018/03/16 05:52

解答頂きありがとうございます。解決したのでベストアンサーに選ばさせてもらいます。 > ```HttpClient#post```メソッドは第２引数のオブジェクトの型に応じて自動で推論されます。この事実を知りませんでした。基本的に他の場所ではapplication/jsonで通信を行っており(自前でそのように設定していた)、その設定を使いまわしていたため、今回もapplication/jsonで通信するようになっていました。ヘッダーにContent-Typeを自前で設定せずに実行したところちゃんと通信することが出来ました。ありがとうございました。

行動規範の内容に同意します