Angular で画像をアップロード

1. Angular で画像をアップロードする
2. Angular でコンポーネントをエクスポートして変数を宣言する
3. Angular の複数の画像の基本的なアップロード
4. Angular での単一画像の基本的なアップロード
5. Angular での複数の画像のアップロードと進行状況
6. Angular での単一画像のアップロードと進行状況
7. Angular でアップロード関数を呼び出す
8. まとめ

この記事では、以下の内容を紹介します。

1. Angular を使用して 4つの異なるスタイルで画像をアップロードします。
2. 画像​​のアップロード時にプログレスバーを表示します。
3. アップロードが完了したら、画像のアップロード完了メッセージを表示します。

Angular で画像をアップロードする

画像はあらゆる Web アプリケーションの基本的な部分であり、すべての Web サイトに画像があります。このチュートリアルでは、さまざまな方法で Angular に画像をアップロードする方法を学習します。

以下のコマンドを使用して、新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

ライブラリをインポートし、ファイルアップローダーのコンポーネントを設定します。

# angular
import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    <input type="file" accept=".jpg,.png" class="button" (change)="upload($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})

Angular でコンポーネントをエクスポートして変数を宣言する

AppComponent をエクスポートし、変数 percentDone を number として宣言し、UploadSuccess を boolean として宣言します。また、HttpClient を呼び出すコンストラクターを宣言します。

# angular
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(private http: HttpClient) {}

Angular の複数の画像の基本的なアップロード

Angular には 4つの異なるスタイルの画像アップロードがあります。複数の画像の基本的なアップロードはその 1つです。画像のプログレスバーを表示せずに、このスタイルで複数の画像をアップロードできます。

basicUploadImage(files: File[]) {
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));
    this.http.post('https://file.io', formData).subscribe((event) => {
      console.log('done');
    });
  }

アップロードリクエストを https://file.io に送信しています。これはバックエンドサーバーの URL で変更できます。バックエンドサーバーはアップロードされた画像データを受信し、アップロードされたファイルへの URL を送信します。

Angular での単一画像の基本的なアップロード

Angular で画像をアップロードするための 2 番目のスタイルは、画像ファイルの基本的なアップロードです。このスタイルでは、ユーザーは一度に 1つの画像しかアップロードできません。

このスタイルでは、画像のアップロード中も進行状況は表示されません。

basicUploadSingleImage(file: File) {
    this.http.post('https://file.io', file).subscribe((event) => {
      console.log('done');
    });
  }

Angular での複数の画像のアップロードと進行状況

Angular で画像をアップロードするための 3 番目のスタイルは、複数の画像の進行状況を伴うアップロードです。ユーザーは、このスタイルでアップロードされたパーセンテージを表示するプログレスバーで複数の画像をアップロードできます。

uploadImageAndProgress(files: File[]) {
    console.log(files);
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));

    this.http.post('https://file.io', formData, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }

Angular での単一画像のアップロードと進行状況

Angular で画像をアップロードするための 4 番目のスタイルは、プログレスバーを備えた単一の画像です。ユーザーは、このスタイルでアップロードされたパーセンテージを表示するプログレスバーを備えた単一の画像をアップロードできます。

uploadAndProgressSingleImage(file: File) {
    this.http
      .post('https://file.io', file, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }

Angular でアップロード関数を呼び出す

Angular に 4つのアップロード機能を追加しました。希望のスタイルでアップロード関数を呼び出すことができます。

uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

出力：

まとめ

Angular での 4つの異なるスタイルの画像アップロードと、upload 関数でそれらを呼び出す方法について説明しました。完全なコードを以下に示します。

import { Component, VERSION } from '@angular/core';
import {
  HttpClientModule,
  HttpClient,
  HttpRequest,
  HttpResponse,
  HttpEventType,
} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    <input type="file" accept=".jpg,.png" class="button" (change)="uploadImage($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(private http: HttpClient) {}

  uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

  basicUploadImage(files: File[]) {
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));
    this.http.post('https://file.io', formData).subscribe((event) => {
      console.log('done');
    });
  }

  basicUploadSingleImage(file: File) {
    this.http.post('https://file.io', file).subscribe((event) => {
      console.log('done');
    });
  }

  uploadImageAndProgress(files: File[]) {
    console.log(files);
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));

    this.http.post('https://file.io', formData, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }

  uploadAndProgressSingleImage(file: File) {
    this.http
      .post('https://file.io', file, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }
}

デモはこちら.