angular7中封装文件上传service服务

水深无声 2024-04-18 08:42 69阅读 0赞

#### 方式一： ####

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