Bootstrap

nz-upload

<nz-form-item>
    <nz-form-label nzXs="4" nzSm="4" nzRequired>标准图标</nz-form-label>
    <nz-form-control nzXs="8" nzSm="8" nzMd="16">
      <nz-upload nzAction="url" [nzShowUploadList]="false" [nzCustomRequest]="customReq"
                 [nzBeforeUpload]="beforeUpload">
        <ng-container *ngIf="!avatarUrl">
          <div style="border: 1px solid #D3D3D3;">
            <div style="padding: 5px;">
              <i nz-icon nzType="upload"></i><span style="margin-left: 5px;">Upload</span>
            </div>
          </div>
        </ng-container>
        <img *ngIf="avatarUrl" [src]="avatarUrl" style="height: 120px;width: 120px;"/>
      </nz-upload>
    </nz-form-control>
  </nz-form-item>

 beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
    return new Observable((observer: Observer<boolean>) => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.msg.error('You can only upload JPG file!');
        observer.complete();
        return;
      }
      const isLt2M = file.size! / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.msg.error('Image must smaller than 2MB!');
        observer.complete();
        return;
      }
      observer.next(isJpgOrPng && isLt2M);
      observer.complete();
    });
  };

  avatarUrl= '';
  customReq = (item: NzUploadXHRArgs) => {
    const formData = new FormData();
    formData.append('file', item.file as any);
    return this.http.post("url前缀部分" + item.action, formData).subscribe(res => {
      this.avatarUrl = res.data
      this.cdr.detectChanges();
      this.form.patchValue({'checkIcon': res.data}) ;
    });
  };

import {NzModalRef, NzUploadFile} from "ng-zorro-antd";

import {Observable, Observer} from "rxjs";

import {NzMessageService} from "ng-zorro-antd/message";

import {NzUploadXHRArgs, UploadFile} from "ng-zorro-antd/upload";

 constructor(

    private fb: FormBuilder,

    public modal: NzModalRef,

    private cdr: ChangeDetectorRef,

    private common: CommonService,

    private http: _HttpClient,

    private modalHelper: ModalHelper,

    public msg: NzMessageService,

  ) 

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;