Angular6自定義指令實現多圖片上傳預覽

在作移動端開發多時候常常會遇到用戶圖片上傳的需求，有單圖片上傳預覽的需求，也有多圖片上傳預覽的需求。本身剛遇到這個需求的時候有踩到各類個樣到坑。通過多番嘗試，下面將本人成功的一個案例分享出來（公司對外網訪問很是嚴格，因此只能本身重寫一個demo來擺弄，親測可行）：

一、先在咱們的項目經過cli命令行建立出咱們要實現上傳文件的組件：

ng generate component fileReader
複製代碼

在file-reader.component.html文件的html代碼以下：

<label class="preview-btn">瀏覽圖片
      <input type="file" appFileReader (onLoad)="addLoad($event)" multiple style="display:none"/>
    </label>
    <div *ngIf="previewImg.length > 0">
      <img *ngFor="let img of previewImg" src="{{img}}" alt="">
    </div>
    <br>
    <button *ngIf="previewImg.length > 0" (click)="clearPreviewImg()" class="preview-btn">清除圖片</button>
複製代碼

在file-reader.component.scss樣式文件對按鈕對樣式稍加美化：

.preview-btn{
        width: 100px;
        border-radius: 4px;
        height: 36px;
        line-height: 36px;
        background-color: greenyellow;
        color: #fff;
        text-align: center;
        display: block;
        cursor: pointer;
        border: none;
        outline: none;
    }
複製代碼

file-reader.component.ts裏面的代碼以下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-file-reader',
  templateUrl: './file-reader.component.html',
  styleUrls: ['./file-reader.component.scss'],
})
export class FileReaderComponent implements OnInit {
  previewImg: Array<string> = [];
  constructor() { }

  ngOnInit() {
  }

  addLoad(e: string) {
    this.previewImg.push(e);
  }

  clearPreviewImg() {
    this.previewImg = [];
  }
}
複製代碼

二、而後經過cli命令建立出咱們要實現上傳預覽功能的自定義指令：

ng generate directive fileReader
複製代碼

建立的文件file-reader.directive.ts邏輯代碼以下，具體的功能代碼也有相應的註釋

import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angular/core';

/** * 圖片選擇轉換成base64 */
@Directive({
  selector: '[appFileReader]'
})
export class FileReaderDirective {

// tslint:disable-next-line: no-output-on-prefix
  @Output()
  onLoad = new EventEmitter();

  constructor(private elementRef: ElementRef) { }
  /** * HostListener給宿主元素添加change事件 * 獲取到的files是一個文件列表，不能直接遍歷，須要先Array.from轉數組類型 */
  @HostListener('change')
  public onChange(): any {
    const files = this.elementRef.nativeElement.files;
    if (files && files.length > 0) {
      Array.from(files).map((item: File, index: number) => {
        const file: File = item;
        const myReader: FileReader = new FileReader();
        /** * onabort 當讀取操做被停止時調用 * onerror 當讀取操做發生錯誤時調用 * onload 當讀取操做成功完成時調用 * onloadend 當讀取操做完成時調用,無論是成功仍是失敗.該處理程序在onload或者onerror以後調用 * onloadstart 當讀取操做將要開始以前調用 * onprogress 在讀取數據過程當中週期性調用 */
        myReader.onloadend = (loadEvent: any) => {
          this.onLoad.emit(loadEvent.target.result);
        };
        /** * readAsBinaryString(file) 將文件讀取爲二進制編碼 * readAsText(file,[encoding]) 將文件讀取爲文本 * readAsDataURL(file) 將文件讀取爲DataURL * abort(none) 終端讀取操做 */
        myReader.readAsDataURL(file);
      });
    }
  }

}
複製代碼

到這一步咱們就基本已經把angular2+自定義指令實現多圖片上傳預覽這一個功能完成了。接下來要怎麼玩就看你們的具體需求是怎樣子的了，反正預覽的圖片數據已經拿到。

第一次寫博客，有不完善的地方但願各位大佬不要吝嗇給出意見。