<!-- 文件选择器 Input -->
<h1>请选择文件：</h1>
<input type="file" multiple (change)="onFileChange($event)" />

<!-- 当前已选择文件 展示区域 -->
<h1>已选择文件：</h1>
<!-- 展示：图片 -->
<ng-container *ngIf="file?.type?.startsWith('image')">
    <img [src]="fileData" alt="">
</ng-container>
<!-- 展示：视频 -->
<ng-container *ngIf="file?.type?.startsWith('video')">
    <video autoplay [src]="fileData" width="300px" height="200px"></video>
</ng-container>
<!-- 展示：音频 -->
<ng-container *ngIf="file?.type?.startsWith('audio')">
    <audio autoplay controls [src]="fileData">
    </audio>
</ng-container>
<!-- 展示：文本 -->
<ng-container *ngIf="file?.type?.startsWith('text')">
    <div style="background: #333;color:#DDD">
        {{fileData}}
    </div>
</ng-container>

<h2>名称 {{file.name}}<ion-icon name="airplane-outline"></ion-icon></h2>

<h2>大小 {{file.size}}<ion-icon name="airplane-outline"></ion-icon></h2>

<h2>类型 {{file.type}}<ion-icon name="airplane-outline"></ion-icon></h2>

<!-- 已选择的所有文件列表 切换区域 -->
<h1>文件列表：</h1>
<ul *ngIf="fileList?.length">

    <li *ngFor="let item of fileList || []" (click)="setFile(item)">{{item?.name}} {{item?.size}} {{item?.type}}</li>
</ul>