Angular ng-zorro 实现图片压缩上传（附加js实现）

import { Injectable, Renderer2 } from '@angular/core';

@Injectable()
export class ImageCompressService {
  maxSize = 500 * 1000;

  constructor(
    private renderer: Renderer2
  ) { }

  read(file: File) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        resolve(reader.result);
      };
    });
  }

  compress(imageDataUrlSource: any, render: Renderer2, ratio?: number, quality?: number): Promise<string> {
    ratio = ratio ? ratio : 1;
    quality = quality ? quality : 0.5;

    return new Promise((resolve, reject) => {
      const sourceImage = new Image();
      // important for safari: we need to wait for onload event
      sourceImage.onload = function () {
        const canvas: HTMLCanvasElement = render.createElement('canvas');
        const ctx: CanvasRenderingContext2D = canvas.getContext('2d');

        canvas.width = sourceImage.naturalWidth * ratio;
        canvas.height = sourceImage.naturalHeight * ratio;

        ctx.drawImage(sourceImage, 0, 0, canvas.width, canvas.height);

        const mime = imageDataUrlSource.substr(5, imageDataUrlSource[0].length);
        // TODO test on mime
        const result = canvas.toDataURL('image/jpeg', quality);

        resolve(result);

      };

      sourceImage.src = imageDataUrlSource;
    });
  }

  convertBase64UrlToBlob (urlData): Blob {
    const arr = urlData.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }

  do (file: File) {
    if (file.size > this.maxSize) {
      const quality = this.maxSize / file.size;
      return new Promise((resolve, reject) => {
        this.read(file).then(srcData => {
          this.compress(srcData, this.renderer, 1, quality).then(value => {
            resolve(this.convertBase64UrlToBlob(value));
          });
        });
      });
    } else {
      return new Promise((resolve, reject) => { resolve(file); });
    }
  }
}

import { Component } from '@angular/core';
import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
import { NzMessageService, UploadFile } from 'ng-zorro-antd';
import { filter } from 'rxjs/operators';
import { ImageCompressService } from '@core/tool/image-compress.service';

@Component({
  selector: 'app-image-upload',
  template: `
    <nz-upload
        nzAction="api/upload/upload_file/"
        nzListType="picture-card"
        [(nzFileList)]="fileList"
        [nzShowButton]="fileList.length < 1"
        [nzPreview]="handlePreview"
        [nzCustomRequest]="handleUpload"
        [nzBeforeUpload]="beforeUpload"
        (nzChange)="uploadChange($event)">
        <i class="anticon anticon-plus"></i>
        <div class="ant-upload-text">Upload</div>
    </nz-upload>
  `,
  providers: [ ImageCompressService ]
})
export class ImageUploadComponent {
  fileList = [];
  previewImage = '';
  previewVisible = false;
  limitFileType = 'image/png,image/jpeg';

  constructor(
    public http: HttpClient,
    public msg: NzMessageService,
    public imgCompress: ImageCompressService
  ) { }

  handlePreview = (file: UploadFile) => {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
  }

  uploadChange(e) {
    console.log(e);
  }

  beforeUpload = (file: UploadFile): boolean => {
    const isImage = file.type === 'image/jpeg';
    if (!isImage) {
      this.msg.error('You can only upload JPG file!');
    }
    return isImage;
  }

  handleUpload = (item) => {
    this.imgCompress.do(item.file).then((bl: Blob) => {
      const formData = new FormData();
      formData.append(item.name, bl);
      const url = item.action ? item.action : '/api/upload/upload_file/';
      const req = new HttpRequest('POST', url, formData, { reportProgress: true });

      this.http.request(req).pipe(filter(e => e instanceof HttpResponse)).subscribe((event: {}) => {
        item.file.response = event['body'];
        item.onSuccess({}, {
          status: 'done'
        });
      }, err => console.log('upload fail'));
    });
  }
}