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

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

» 2018年03月26日 05時00分 公開
[山田祥寛]
「Angular TIPS」のインデックス

連載目次

現在では、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)
      );
  }
}

ファイルをアップロードするためのコード(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メソッドを利用します。

[構文]appendメソッド

append(key, data [,name])

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

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

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

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

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


「Angular TIPS」のインデックス

Angular TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

AI for エンジニアリング
「サプライチェーン攻撃」対策
1P情シスのための脆弱性管理/対策の現実解
OSSのサプライチェーン管理、取るべきアクションとは
Microsoft & Windows最前線2024
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。