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+自定义指令实现多图片上传预览这一个功能完成了。接下来要怎么玩就看你们的具体需求是怎样子的了，反正预览的图片数据已经拿到。

第一次写博客，有不完善的地方但愿各位大佬不要吝啬给出意见。