<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,
)