Angularでファイルをサーバーに「アップロード」するには？（HttpClientサービス）：Angular TIPS

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

» 2018年03月26日 05時00分公開

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

【対応バージョン】

　Angular 5以降。v5時点で執筆しました。

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

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

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

@Component({
selector: 'app-root',
template: `
<form>

<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　複数のファイルを指定できるようにするには、<input type="file">要素に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メソッドを利用します。