将 Ng-zorro 组件库的 Upload 组件上传的图片转换为 Base64 格式，并作为参数传递到接口中。

最编程 2024-07-18 08:21:33

...

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;
  };

上一篇：本周学习总结（ng-zorro/MDN 索引/读书笔记）

下一篇： angular 使用 ng-zooro 组件库（ng.ant.design）在表单中实现文件上传