zoukankan      html  css  js  c++  java
  • 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); //告诉父组件上传完成
            }
        }
    }
  • 相关阅读:
    12、SpringBoot-CRUD增加数据
    12、SpringBoot-CRUD增加数据
    Cache操作类
    pythonhttp
    python学习
    自动化测试LoadRunner
    pythonweb自动化测试
    python学习工具篇
    python学习
    自动化测试之python安装
  • 原文地址:https://www.cnblogs.com/mary-123/p/10057331.html
Copyright © 2011-2022 走看看