方式一：

1. html

   <div nz-col nzSpan="24"><nz-form-item><nz-form-label style="margin-left: -4px;" [nzSpan]="3" nzRequired>授权书</nz-form-label><nz-form-control [nzSpan]="21"><button nz-button nzType="dashed" (click)="handleFileUploadBook()"><i nz-icon nzType="upload"></i><span>点击上传授权书文件</span></button><span class="uploadTips" *ngIf="authorizationFileList.length > 0"><i nz-icon nzType="paper-clip" nzTheme="outline"></i><span>{{authorizationFileList[0].name}}</span></span><input type="file" #fileUploadBook style="display: none;"></nz-form-control></nz-form-item>
   </div>
   

2. ts

   @ViewChild('fileUploadBook') fileUploadBook: any; // 获取授权书文件上传dom// 授权书上传
   handleFileUploadBook() {this.fileUpload.handleFileUpload(this.fileUploadBook, (data: any) => {this.authorizationFileList = [data];});
   }
   

3. file-upload.service.ts

   import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
   })
   export class FileUploadService {constructor() { }// 文件上传handleFileUpload(fileUploadInputDom: any, cb: any) {const that = this;// 解决同一文件不能连续上传问题fileUploadInputDom.nativeElement.setAttribute('type', 'text');fileUploadInputDom.nativeElement.setAttribute('type', 'file');// 调用文件上传弹框fileUploadInputDom.nativeElement.click();// 监听改变事件fileUploadInputDom.nativeElement.onchange =  function() {// 定义文件流对象const filereader = new FileReader();// 获取文件相关信息 name size type等const file = this.files[0];// 通过判断文件大小判断是否为空文件if (this.files[0]) {if (this.files[0].size === 0) {alert('您上传的文件内容为空, 请重新上传！');return;}}// 获取文件名称（全名）const fileName = file.name;// 文件名称以最后一个.号为分割const index = fileName.lastIndexOf('.');// 获取文件后缀名const base64fileType = fileName.substring(index + 1, fileName.length);// 获取文件名（.的前部分）const docName = fileName.substring(0, index);// 将文件转换为文件流filereader.readAsDataURL(file);filereader.onload = () => {// 获取base64值const fileStreamBase64 = filereader.result;cb({ File: fileStreamBase64, FileType: base64fileType, name: fileName });};};}}
   

方式二

1. html

   <div nz-col nzSpan="24"><nz-form-item><nz-form-label style="margin-left: -4px;" [nzSpan]="3" nzRequired>审批依据</nz-form-label><nz-form-control [nzSpan]="21"><button nz-button nzType="dashed" (click)="handleFileUploadApproval(fileUploadApproval)"><i nz-icon nzType="upload"></i><span>点击上传审批依据</span></button><span class="uploadTips" *ngIf="authorizationFileList.length > 0"><i nz-icon nzType="paper-clip" nzTheme="outline"></i><span>{{authorizationFileList[0].name}}</span></span><input type="file" #fileUploadApproval style="display: none;"></nz-form-control></nz-form-item>
   </div>
   

2. ts

   // 审批依据上传
   handleFileUploadApproval(fileUploadApproval: ElementRef) {this.fileUpload.handleFileUpload(fileUploadApproval, (data: any) => {this.approvalFileList.push(data);console.log(this.approvalFileList);});
   }
   

3. file-upload.service.ts

   import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
   })
   export class FileUploadService {constructor() { }// 文件上传handleFileUpload(fileUploadInputDom: any, cb: any) {const that = this;// 解决同一文件不能连续上传问题fileUploadInputDom.setAttribute('type', 'text');fileUploadInputDom.setAttribute('type', 'file');// 调用文件上传弹框fileUploadInputDom.click();// 监听改变事件fileUploadInputDom.onchange =  function() {// 定义文件流对象const filereader = new FileReader();// 获取文件相关信息 name size type等const file = this.files[0];// 通过判断文件大小判断是否为空文件if (this.files[0]) {if (this.files[0].size === 0) {alert('您上传的文件内容为空, 请重新上传！');return;}}// 获取文件名称（全名）const fileName = file.name;// 文件名称以最后一个.号为分割const index = fileName.lastIndexOf('.');// 获取文件后缀名const base64fileType = fileName.substring(index + 1, fileName.length);// 获取文件名（.的前部分）const docName = fileName.substring(0, index);// 将文件转换为文件流filereader.readAsDataURL(file);filereader.onload = () => {// 获取base64值const fileStreamBase64 = filereader.result;cb({ File: fileStreamBase64, FileType: base64fileType, name: fileName });};};}}
   

说明

• 第一种方式需要单独获取dom
• 第二种方式直接在html中将dom传递给方法