NG-ZORRO 使用相关

Upload上传

import { Component, Input, Output, EventEmitter, Inject } from '@angular/core';
import { NzMessageService, UploadFile, UploadFilter, UploadXHRArgs } from 'ng-zorro-antd';
import {
    HttpRequest,
    HttpClient,
    HttpEventType,
    HttpEvent,
    HttpResponse
} from '@angular/common/http';
import { forkJoin } from 'rxjs';
import { HttpService } from './httpService';
export class File {
    uid: '';
    name: '';
    status: 'done';
    url: '';
}
export class UploadFileType {
    'fileId': '';
    'fileName': '';
    'fileSize': '';
    'fileUrl': '';
    'sequence': '0';
}
 
@Component({
    selector: 'UploadPictureCardComponent',
    template: `
    <nz-upload
      [nzAction]='urlConfig.url+"文件上传地址后缀"'
      (nzChange)="handleChange($event)"
      nzListType="picture-card"
      [nzBeforeUpload]="beforeUpload"
      [nzFilter]="filters"
      [nzShowUploadList]="false"
      [(nzFileList)]="fileList">
        <i class="anticon anticon-plus"></i>
        <div *ngIf='!childIsLoad' class="ant-upload-text">Upload</div>
        <div *ngIf='childIsLoad' class="ant-upload-text">文件上传中{{progress}}...</div>
    </nz-upload>
  `
})
export class UploadPictureCardComponent {

fileList: File[] = [];
uploadFiles: UploadFileType[] = [];
previewImage = '';
previewVisible = false;
progress = ''; //上传进度
@Input() childIsLoad;
@Input() flieSessionStoragesName; //文件存在sessionStorage中的键值
@Output() private childOuter = new EventEmitter(); //子组件向父组件传值
@Output() private childIsLoadOuter = new EventEmitter(); //告诉父组件是否上传中

    constructor(
        private msg: NzMessageService,
        private httpService: HttpService,
        @Inject('urlConfig') public urlConfig
    ) {}
    ngOnInit() {
        //初始化文件
    }
 
    //上传限制
    filters: UploadFilter[] = [
        {
            name: 'type',
            fn: (fileList: UploadFile[]) => {
                const filterFiles = fileList.filter(
                    w =>
                        ~['image/png', 'image/jpg', 'image/gif', 'image/bmp', 'image/jpeg'].indexOf(
                            w.type
                        )
                );
                if (filterFiles.length !== fileList.length) {
                    this.msg.create('error', '请上传png、jpg、gif、bmp、jpeg格式的图片!');
                    return filterFiles;
                }
                return fileList;
            }
        }
    ];
    //上传之前的操作
    beforeUpload = (file: File) => {
        let ispass = true; //是否继续往下执行
        console.log('上传之前的操作');
        //以下操作在
        if (window.sessionStorage.getItem(this.flieSessionStoragesName)) {
            let list_ = JSON.parse(window.sessionStorage.getItem(this.flieSessionStoragesName));
            for (let i in list_) {
                if (file.name == list_[i].fileName) {
                    ispass = false;
                    this.msg.create('warning', '请勿上传同名文件！');
                    break;
                }
            }
        }
        return ispass; //返回true继续执行，false直接停止
    };
 
    //开始、上传进度、完成、失败都会调用这个函数
    handleChange(info: any): void {
        console.log(info);
        if (info.type == 'start') {
            this.childIsLoadOuter.emit(true); //告诉父组件上传中
            this.progress = '0%';
        }
        if (info.type == 'progress') {
            this.progress = info.event.percent.toFixed(2) + '%';
        }
        if (info.type === 'success') {
            this.progress = '';
            console.log(info);
            let file = new UploadFileType();
            file.fileId = info.file.response['data'].id;
            file.fileName = info.file.response['data'].name;
            file.fileSize = info.file.response['data'].size;
            file.fileUrl = info.file.response['data'].downloadUrl;
            file.sequence = '0';
            this.childOuter.emit(file); //向父组件传值
            this.childIsLoadOuter.emit(false); //告诉父组件上传完成
            this.msg.create('success', '上传成功！');
        }
        if (info.type === 'error') {
            this.childIsLoadOuter.emit(false); //告诉父组件上传完成
        }
    }
}