Angularで画像のアップロードを簡単にする方法

これは、AmazonS3に画像をアップロードする方法に関するチュートリアルの第2部です。ここで最初の部分を見つけることができます。この記事では、角度部分を見ていきます。

また、画像アップロードのステップバイステップのビデオチュートリアルを見ることができます。リンクはこの記事の下部にあります。

1.最初にテンプレートを作成します

まず、他のコンポーネントに簡単にプラグインできる再利用可能なコンポーネントを作成します。

入力用の単純なHTMLテンプレートから始めましょう。選択したスタイルを適用することを忘れないでください。そうしないと、GitHubリポジトリから取得できます。

 Select Image  

ここで重要なのは、ファイルに設定される入力のタイプです。受け入れ属性定義は、入力用のファイルを受け入れました。Image / *は、この入力によって任意のタイプの画像を選択できることを指定します。#imageInputは、アップロードされたファイルにアクセスできる入力の参照です。

A変更我々は、ファイルを選択したときにイベントが発生します。それでは、クラスコードを見てみましょう。

2.コンポーネントコードを忘れないでください

class ImageSnippet { constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { }, (err) => { }) }); reader.readAsDataURL(file); } }

このコードを分解してみましょう。あなたはで見ることができるprocessFileことchangeイベントから送信した画像入力を取得しています。imageInput.files [0]を書き込むことにより、最初のファイルにアクセスします。ファイルの追加のプロパティにアクセスするには、リーダーが必要です。readAsDataURLを呼び出すことにより以前にサブスクライブしたaddEventListenerのコールバック関数で画像のbase64表現を取得できます。

コールバック関数では、ImageSnippetのインスタンスを作成しています最初の値は、後で画面に表示する画像のbase64表現です。2番目の値はファイル自体であり、AmazonS3にアップロードするためにサーバーに送信します。

ここで、このファイルを提供し、サービスを介してリクエストを送信する必要があります。

3.サービスも必要です

サービスがなければAngularアプリにはなりません。このサービスは、ノードサーバーにリクエストを送信する役割を果たします。

export class ImageService { constructor(private http: Http) {} public uploadImage(image: File): Observable { const formData = new FormData(); formData.append('image', image); return this.http.post('/api/v1/image-upload', formData); } }

前回の講義でお話ししたように、フォームデータの一部として画像を送信する必要があります。私たちは、のキーの下に画像を追加します画像(同じキー我々はノードで構成された前の)データを形成すること。最後に、ペイロードにformData入れてサーバーにリクエストを送信する必要があります。

今、私たちは祝うことができます。それでおしまい!画像をアップロードに送信しました!

次の行では、ユーザーエクスペリエンスを向上させるための追加のコードをいくつか提供します。

4.追加のUXアップデート

class ImageSnippet { pending: boolean = false; status: string = 'init'; constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} private onSuccess() { this.selectedFile.pending = false; this.selectedFile.status = 'ok'; } private onError() { this.selectedFile.pending = false; this.selectedFile.status = 'fail'; this.selectedFile.src = ''; } processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.selectedFile.pending = true; this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { this.onSuccess(); }, (err) => { this.onError(); }) }); reader.readAsDataURL(file); } }

ImageSnippetに新しいプロパティPendingStatusを追加しました保留中は、画像が現在アップロードされているかどうかに応じて、falseまたはtrueになります。ステータスはアップロードプロセスの結果です。それは可能OKまたはFAILED。

OnSuccessonErrorは、画像のアップロード後に呼び出され、画像のステータスを設定します。

では、更新されたテンプレートファイルを見てみましょう。

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

ここでは、アップロードした画像と、画像の状態に応じたエラーを画面に表示しています。画像が保留中の場合は、アップロードアクティビティをユーザーに通知するために、回転する画像も表示されます。

5.スタイリングを追加します

スタイリングはこのチュートリアルの焦点では​​ないので、このリンクですべてのSCSSスタイルを入手できます。

仕事は終わりました!:)簡単な画像のアップロードはこれで終わりです。不明な点がある場合は、このチュートリアルの最初の部分を最初に見たことを確認してください。

このチュートリアルが気に入った場合は、Udemyの完全なコースを確認してください—完全なAngular、React、Nodeガイド| Airbnbスタイルのアプリ。

完了したプロジェクト: MyGitHubリポジトリ

ビデオ講義:YouTubeチュートリアル

乾杯、

フィリップ