teacherlist.componen.html的内容:
<div class="avatar">
<nz-avatar [nzSize]="110" [nzSrc]="useravator"></nz-avatar>
</div>
<nz-upload [nzAccept]="'.jpg,.jpeg,.png'" [nzShowUploadList]="false" [nzBeforeUpload]="customUpload"
(nzChange)="handleChange($event)">
<button nz-button class="button_view">
<i nz-icon nzType="upload"></i>
<span>更换头像</span>
</button>
</nz-upload>
teacherlist.component.ts的内容:
export class TeacherlistComponent implements OnInit {
constructor() {}
useravator = '';
customUpload = (file: NzUploadFile, fileList: NzUploadFile[]): boolean => {
const data = new FormData();
// @ts-ignore
data.set('file', file);
this.http.post(`https:/upload/website/file?_allow_anonymous=true`, data).subscribe((res) => {
if (res.status === 200) {
this.msg.success('上传成功');
this.useravator = res.avatar;
} else {
this.msg.error('上传失败');
}
});
return false;
// tslint:disable-next-line: semicolon
};
handleChange({ file, fileList }: UploadChangeParam): void {
const status = file.status;
if (status !== 'uploading') {
console.log(file, fileList);
}
if (status === 'done') {
this.msg.success(`${file.name} file uploaded successfully.`);
} else if (status === 'error') {
this.msg.error(`${file.name} file upload failed.`);
}
}
}