Angularでファイルをサーバーに「アップロード」するには?(HttpClientサービス):Angular TIPS
HttpClientサービスを使ってサーバーにファイルをアップロードするための基本的な方法を説明する。
※現在では、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>
<!-- [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)
);
}
}
*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メソッドを利用します。
[構文]appendメソッド
append(key, data [,name])
- key: キー名
- data: データ本体
- name: ファイル名
アップロードしたいデータを準備できたら、あとはHttpClient#postメソッドに引き渡すだけです([5])。アップロード先(upload.php)については本稿の守備範囲外なので、割愛します。こちらからコードをダウンロードし、内容確認してください。
また、本稿のサンプルを実行するには、ApacheのようなPHPが動作するサーバーが必要です。具体的な手順は、先述の別稿も参考にしてください。
サンプルが正しく実行できると、サーバー上の/appフォルダーに指定された画像ファイルが保存されていることが確認できます。
処理対象:サービス(Service) カテゴリ:基本
処理対象:クラス(CLASS) カテゴリ:サービス(Service)
API:HttpClient カテゴリ:@angular > common > CLASS(クラス)
Copyright© Digital Advantage Corp. All Rights Reserved.