質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.87%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,609

nerianighthawk

score 299

 前提・実現したいこと

サーバサイド: 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 での通信方法がわからず質問した次第です。

 該当のソースコード

pushFileToStorage(file: File, http: HttpClient) {
    let formdata: FormData = new FormData();
    formdata.append('file', file);
    this.headers = this.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN'));
    // this.headers = this.headers.set('Content-Type', 'application/json');
    this.headers = this.headers.set('Content-Type', 'multipart/form-data');
    http.post(this.hostname + "settings/me/icon", formdata, { withCredentials: true, headers: this.headers, responseType: 'text'}).subscribe(
      id => {
      },
      error => {
      }
    );
  }
@PostMapping(value = "me/icon")
@ResponseStatus(HttpStatus.CREATED)
public ResponseEntity<String> handleFileUpload(@AuthenticationPrincipal User user, @RequestParam("file") MultipartFile file) {
    String message = "";
    try {
        settingLogic.store(user.getEmployeeNumber(), file);
        files.add(file.getOriginalFilename());
        message = "You successfully uploaded " + file.getOriginalFilename() + "!";
        return ResponseEntity.status(HttpStatus.OK).body(message);
    } catch (Exception e) {
        message = "FAIL to upload " + file.getOriginalFilename() + "!";
        return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(message);
    }
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

関連: https://stackoverflow.com/questions/46059226/upload-image-with-httpclient

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/16 14:52

    解答頂きありがとうございます。解決したのでベストアンサーに選ばさせてもらいます。

    > ```HttpClient#post```メソッドは第2引数のオブジェクトの型に応じて自動で推論されます。

    この事実を知りませんでした。基本的に他の場所ではapplication/jsonで通信を行っており(自前でそのように設定していた)、その設定を使いまわしていたため、今回もapplication/jsonで通信するようになっていました。

    ヘッダーにContent-Typeを自前で設定せずに実行したところちゃんと通信することが出来ました。ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.87%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる