1、使用NG-ZORRO组件库创建上传按钮：
首先在组件的ts代码中声明一个空的上传的图片列表变量，用于后面上传照片。
photoFileList = []; // 用于存储上传的图片列表
使用NG-ZORRO组件库在对应的表单中添加上一个上传的按钮。
| 属性 | 使用 |
|---|---|
| nzAccept | 接受上传的文件类型 |
| nzSize | 限制文件大小 |
| nzFileList | 需要上传的图片列表 |
| nzLimit | 限制单次最多上传数量 |
| nzShowButton | 是否展示上传按钮 |
| nzBeforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传 |
<nz-form-item nz-row>
<nz-form-label nz-col [nzSpan]="6" nzRequired>
人员照片
</nz-form-label>
<nz-form-control nz-col [nzSm]="14" [nzXs]="24">
<nz-upload class="d-block" nzFileType="image/png,image/jpeg,image/gif,image/bmp,image/x-icon"
nzAccept="image/png,image/jpeg,image/gif,image/bmp" nzSize="800" [nzLimit]="1" [(nzFileList)]="photoFileList"
[nzShowButton]="photoFileList.length < 1" [nzBeforeUpload]="beforeUpload">
<button nz-button><i nz-icon nzType="upload"></i><span>上传照片</span></button>
</nz-upload>
<img class="preview-img" *ngIf="photoFileList[0]&&photoFileList[0].certBinaryData" [src]="photoFileList[0].certBinaryData">
</nz-form-control>
</nz-form-item>
图1.png
2、将上传的图片文件转Base64字符串：
通过创建一个新的FileReader 对象，根据MDN允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
reader.onload：文件读取完成时触发。
render.result：只读属性，指代的文件的内容，该属性仅在读取操作完成后才有效。
getBase64(file: File): Promise<string | ArrayBuffer | null> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
在上传完图片时触发钩子函数beforeUpload，异步转换图片为base64字符串，再传给后台
beforeUpload = (file) => {
this.photoFileList = [...this.photoFileList, file];
setTimeout(async () => {
file.certBinaryData = await this.getBase64(file);
file.url = file.certBinaryData;
}, 1);
return false;
};
