Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Angular TIPS

Angular TIPS

ファイルをサーバーにアップロードするには?(HttpClientサービス)

2018年3月26日

HttpClientサービスを使ってサーバーにファイルをアップロードするための基本的な方法を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 5以降。v5時点で執筆しました。

 別稿「TIPS:サーバーサイドと非同期通信するには?」では、HttpClientサービスを利用したHTTP非同期通信の基本を紹介しました。HttpClientサービスを利用することで、Angularアプリから任意のファイルをサーバーにアップロードすることもできます。

 さっそく、具体的な例を見てみましょう。以下は、<input type="file">で指定された画像ファイルをサーバーにアップロードするためのコードです。

TypeScript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
  <form>
  <!-- 1アップロードファイル選択ボックスを準備 *1 -->
  <input id="upfile" name="upfile" type="file" #fl
    accept="image/*" (change)="onchange(fl.files)" />
  </form>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '';
  result = '';

  constructor(private http: HttpClient) { }

  // 2アップロードの実行
  onchange(list: any) {
    // ファイルが指定されていなければ
    if (list.length <= 0) { return; }

    // 3ファイルを取得
    let f = list[0];
    // 4ファイルをセット
    let data = new FormData();
    data.append('upfile', f, f.name);

    // 5サーバーに送信
    this.http.post('app/upload.php', data)
      .subscribe(
        data => console.log(data),
        error => console.log(error)
      );
  }
}
ファイルをアップロードするためのコード(app.component.ts)

*1 複数のファイルを指定できるようにするには、要素にmultiple属性を付与してください。

指定した画像ファイルをサーバーに保存
指定した画像ファイルをサーバーに保存

 ファイル選択ボックス(<input type="file">)で指定されたファイルを取得するには、HTMLInputElementオブジェクト(ファイル選択ボックス)のfilesプロパティにアクセスします。HTMLInputElementオブジェクトは、テンプレート参照変数#flで取得できます。1であれば、changeイベントのタイミングで、指定されたファイルをonchangeイベントハンドラーに渡します。

 onchangeイベントハンドラーの中身も見てみましょう(2)。filesプロパティの戻り値(引数list)は、ファイルの集合(FileListオブジェクトの配列)です。ただし、この例ではファイルは1つであることが分かっているので*1、決め打ちで先頭のファイル(list[0])を取得します(3)。

 取得したファイルは、後でHttpClientサービスに渡せるよう、FormDataオブジェクトにセットします(4)。FormDataオブジェクトは、multipart/form-data形式のフォーム情報をキー/値の形式で表すオブジェクトです。FormDataオブジェクトにファイル(値)を追加するには、appendメソッドを利用します。

[構文]appendメソッド

append(key, data [,name])

  • key: キー名
  • data: データ本体
  • name: ファイル名

 アップロードしたいデータを準備できたら、あとはHttpClient#postメソッドに引き渡すだけです(5)。アップロード先(upload.php)については本稿の守備範囲外なので、割愛します。こちらからコードをダウンロードし、内容確認してください。

 また、本稿のサンプルを実行するには、ApacheのようなPHPが動作するサーバーが必要です。具体的な手順は、先述の別稿も参考にしてください。

 サンプルが正しく実行できると、サーバー上の/appフォルダーに指定された画像ファイルが保存されていることが確認できます。

処理対象:サービス(Service) カテゴリ:基本
処理対象:クラス(CLASS) カテゴリ:サービス(Service)
API:HttpClient カテゴリ:@angular > common > CLASS(クラス)

※以下では、本稿の前後を合わせて5回分(第44回~第48回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Angular TIPS
44. 式の値によってメッセージを切り替えるには?(ngSwitch)

JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明する。

Angular TIPS
45. 自作のサービスを定義するには?(@Injectableデコレーター)

既存のコンポーネントからアプリ固有のロジックをサービスとして切り出すための基本的な方法を説明する。

Angular TIPS
46. サーバーサイドと非同期通信するには?(HttpClientサービス)

HttpClientサービスを使ってWeb APIと非同期通信するための基本的な方法を説明する。

Angular TIPS
47. 【現在、表示中】≫ ファイルをサーバーにアップロードするには?(HttpClientサービス)

HttpClientサービスを使ってサーバーにファイルをアップロードするための基本的な方法を説明する。

Angular TIPS
48. コンポーネントからページのメタ情報を操作するには?(Meta)

Metaサービスを使って、コンポーネントからページのメタ情報を操作する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!