HOWTO · Angular
Angular で画像をアップロード
このチュートリアルでは、Angular で画像をアップロードする方法を示します。
この記事では、以下の内容を紹介します。
- Angular を使用して 4つの異なるスタイルで画像をアップロードします。
- 画像のアップロード時にプログレスバーを表示します。
- アップロードが完了したら、画像のアップロード完了メッセージを表示します。
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;
}
});
}
}
