angular7中封装文件上传service服务

方式一：

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传递给方法