方式一:
-
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>
-
ts
@ViewChild('fileUploadBook') fileUploadBook: any; // 获取授权书文件上传dom // 授权书上传 handleFileUploadBook() { this.fileUpload.handleFileUpload(this.fileUploadBook, (data: any) => { this.authorizationFileList = [data]; }); }
-
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 }); }; }; } }
方式二
-
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>
-
ts
// 审批依据上传 handleFileUploadApproval(fileUploadApproval: ElementRef) { this.fileUpload.handleFileUpload(fileUploadApproval, (data: any) => { this.approvalFileList.push(data); console.log(this.approvalFileList); }); }
-
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传递给方法