s202226701049/AIart-app/src/app/upload-file/upload-file.component.html

<div class="container">
  <!-- 上半部分：文件选择器 -->
  <div class="upload-section">
    <h1 class="main-title">文件上传与预览</h1>
    <p class="subtitle">选择文件后，点击上传并查看文件的预览</p>
    <input type="file" multiple (change)="onFileChange($event)" />
    <button (click)="upload()">上传文件</button>
  </div>

  <!-- 下半部分：文件上传预览 -->
  <div class="preview-section" *ngIf="url; else emptyState">
    <h3>文件预览：</h3>
    <!-- 判断是否为图片 -->
    <img *ngIf="isImage(url)" [src]="url" alt="Uploaded Image" />
    <!-- 判断是否为视频 -->
    <video *ngIf="isVideo(url)" [src]="url" controls></video>
    <!-- 其他文件类型提供下载链接 -->
    <a *ngIf="!isImage(url) && !isVideo(url)" [href]="url" target="_blank">下载文件</a>
  </div>

  <!-- 没有文件时的提示 -->
  <ng-template #emptyState>
    <div class="empty-preview">
      <p>上传后在此查看文件的预览</p>
    </div>
  </ng-template>
</div>