【Angularサンプルプログラム解説(4)】画像アップロードについて

はじめに

前回に引き続き、Angularで作成したショッピングサイトをイメージしたサンプルアプリの解説を行います。

前回の解説はこちらを参照

【Angularサンプルプログラム解説(1)】ヘッダメニューについて

 

今回は、作成したサンプルアプリの画像アップロード部分にポイントを絞ってプログラムの解説を行います。

画像アップロードはこんな感じです

アップロード先は、今回Google Driveになるようにバックエンドを作成しています。が、本記事ではバックエンドの解説については行いません。

 

 

環境

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.2.7
  • Visual Studio Code:1.13

 

前提

以下からソースコードを取得している前提で説明を行います。

ショッピングサイトサンプルプログラム

 

 

解説

以下の2点について解説していきます。

  1. ファイルアップローダー(ng2-fancy-image-uploader)インストール手順
  2. ファイルアップローダー利用方法について

 

1.ファイルアップローダー(ng2-fancy-image-uploader)インストール手順

ファイルアップロードをする際、対象ファイルをドラッグ&ドロップで設定できて、プレビュー表示できるようにしたかったので、今回はng2-fancy-image-uploaderというモジュールを利用しました。

 

プロジェクト内で以下コマンドを実行し、ng2-fancy-image-uploaderをインストールします。

command
$ npm install ng2-fancy-image-uploader --save

 

2.ファイルアップローダー利用方法について

まず、ファイルアップロードエリアを定義している部分について確認します。

src/app/goods/goodsregist.component.ts
import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';
import { FancyImageUploaderOptions, UploadedFile } from 'ng2-fancy-image-uploader';
import { GoodsPassService } from '../services/goodspass.service';
import { Goods } from '../services/goods';
import { CONST} from '../common/const';
import { BlockUI, NgBlockUI } from 'ng-block-ui';

@Component({
  selector: 'app-goodsregist',
  templateUrl: './goodsregist.component.html',
  styleUrls: ['./goodsregist.component.css'],
})
export class GoodsRegistComponent{
  @BlockUI() blockUI: NgBlockUI;
  // 入力フォーム入力チェック定義
  goodsForm : FormGroup;
  // 入力フォーム入力値
  goods = new Goods;
  // 画面更新モードの判定
  private isUpdate: boolean = false;
  // ファイルアップロードエリア定義
  options: FancyImageUploaderOptions = {
    thumbnailHeight: 150,
    thumbnailWidth: 150,
    uploadUrl: CONST.REST_API.BASE_URL + CONST.REST_API.GOODS_URL + 'upload',
    allowedImageTypes: ['image/png', 'image/jpeg'],
    maxImageSize: 3
  };
・
・
・

 

MEMO

FancyImageUploaderOptionsでファイルアップロードエリアの定義を行っています。

thumbnailHeightでエリアの高さ、uploadUrlでアップロード時にajax通信でコールするサービスのURL、allowedImageTypesでアップロード可能なファイル修飾子などが指定できます。

 

次にファイルアップロードエリアへの画像セット時のイベント処理について確認します。

src/app/goods/goodsregist.component.ts
・
・
・
  /** ファイルアップロードエリア画像設定完了時の処理 */ 
  onUpload(file: UploadedFile) {
    this.goods.picture = file.response;
    this.blockUI.stop();
  }

  /** ファイルアップロードエリア画像設定時の処理 */
  fileChangeEvent(file: UploadedFile) {
    this.blockUI.start('Waiting...');
  }

  /** 画像変更ボタン押下時の処理 */
  changeImage() {
    this.goods.picture = "";
    this.goodsPassService.setGoods(this.goods);
  }

}

 

MEMO
onUpload()

画像アップロードのバックエンド処理が正常に完了した際に実行したい処理を記載します。サンプルではLoading…でロックしている画面を解放します。

 

fileChangeEvent()

アップロードエリアをクリックし、画像をローカルPC上で選択した際に実行したい処理を記載します。サンプルではLoading…で画面をロックしています。

 

changeImage()

アップロードエリアに画像をドラッグ&ドロップでセットした際に実行したい処理を記載します。サンプルではLoading…で画像をロックしています。

 

最後に、上記処理(TypeScript)に対応する画面(html)側を確認します。

src/app/goods/goodsregist.component.html
・
・
・
                    <tr>
                        <label>画像</label>
                        <button *ngIf="isUpdate && goods.picture" md-raised-button color="accent" class="changeImg" (click)="changeImage()"><label>変更</label><md-icon>cached</md-icon></button>
                        <fancy-image-uploader *ngIf="!isUpdate || !goods.picture" [options]="options" (onUpload)="onUpload($event)" (drop)="fileChangeEvent($event)" (change)="fileChangeEvent($event)"></fancy-image-uploader>
                        <img *ngIf="isUpdate && goods.picture" src="{{googleDrivePictureUrl}}{{goods.picture}}">
                        <md-input-container class="hidden">
                            <input mdInput placeholder="画像" class="hidden" maxlength="255" [(ngModel)]="goods.picture" [ngModelOptions]="{standalone: true}">
                        </md-input-container>
                        <br/>
                        <br/>
                    </tr>
・
・
・
MEMO
fancy-image-uploaderタグの部分が画像アップロードエリアです。

dropイベント、onUploadイベント、changeイベントに対応するTypeScriptの処理を呼べるようにする設定を行っています。

 

おわりに

本記事では画像アップロードについてサンプルプログラムを用いて解説しました。

今回は画像アップロードのPreviewが確認したかったのでng2-fancy-image-uploaderを利用しました。

サンプルプログラムを参考にすれば、簡単に画像アップロード機能を実装できると思います。

興味があれば参考にして実装してみてください!!!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください