AngularFireStorage多图片上传：如何为每个文件显示独立进度条

我来帮你解决这个多文件上传进度条的问题！核心思路是给每个上传的文件单独维护一个状态对象，跟踪它的进度、完成状态和错误信息，这样就能在模板里为每个文件渲染独立的进度条了。下面是具体的实现步骤：

1. 定义上传任务状态模型 #

首先在组件里定义一个接口，用来存储每个文件的上传状态：

// 定义每个上传任务的状态
interface UploadTask {
  file: File;
  progress: number;
  isCompleted: boolean;
  error?: string; // 可选的错误信息
  downloadUrl?: string; // 可选的文件下载URL（如果需要）
}

2. 在组件中维护任务数组 #

在组件类里声明一个数组，用来保存所有正在进行或已完成的上传任务：

export class YourUploadComponent {
  uploadTasks: UploadTask[] = [];
  currentUserEmail: string = "你的用户邮箱"; // 替换成你实际的用户邮箱变量

  constructor(private storage: AngularFireStorage) {}

  // ... 其他代码
}

3. 修改startUpload方法，跟踪每个文件的进度 #

更新你的startUpload方法，每次处理文件时创建对应的状态对象，并监听上传进度更新这个对象：

startUpload(event: FileList) {
  Array.from(event).forEach(file => {
    // 检查文件类型是否为图片
    if (file.type.split('/')[0] !== 'image') {
      // 将错误任务加入数组，方便在模板显示提示
      this.uploadTasks.push({
        file,
        progress: 0,
        isCompleted: false,
        error: 'Dieses Dateiformat wird nicht unterstützt'
      });
      return;
    }

    // 创建当前文件的上传任务状态对象
    const newUploadTask: UploadTask = {
      file,
      progress: 0,
      isCompleted: false
    };
    this.uploadTasks.push(newUploadTask);

    // 构建Storage路径
    const storagePath = `uploads/${this.currentUserEmail}/${file.name}`;
    const storageRef = this.storage.ref(storagePath);
    // 启动上传任务
    const uploadTask = this.storage.upload(storagePath, file);

    // 监听上传进度，实时更新任务状态
    uploadTask.percentageChanges().subscribe(percent => {
      newUploadTask.progress = percent || 0;
    });

    // 监听上传完成/失败状态
    uploadTask.snapshotChanges().pipe(
      finalize(() => {
        newUploadTask.isCompleted = true;
        // 如果需要获取文件的下载URL，在这里处理
        storageRef.getDownloadURL().subscribe(url => {
          newUploadTask.downloadUrl = url;
          // 可以在这里把URL保存到数据库或其他地方
        });
      })
    ).subscribe({
      error: (err) => {
        newUploadTask.error = err.message || 'Upload fehlgeschlagen';
      }
    });
  });
}

4. 在模板中渲染每个文件的进度条 #

在组件的HTML模板里，循环遍历uploadTasks数组，为每个文件渲染独立的进度条、文件名和状态提示：

<!-- 多文件上传进度列表 -->
<div class="upload-list">
  <div *ngFor="let task of uploadTasks" class="upload-item">
    <!-- 文件名 -->
    <h4>{{ task.file.name }}</h4>
    
    <!-- 进度条容器 -->
    <div class="progress-container">
      <div 
        class="progress-bar" 
        [style.width.%]="task.progress"
      ></div>
    </div>
    
    <!-- 进度百分比显示 -->
    <p>{{ task.progress | number:'1.0-0' }}% abgeschlossen</p>
    
    <!-- 错误提示 -->
    <p *ngIf="task.error" class="error-text">{{ task.error }}</p>
    
    <!-- 完成提示 -->
    <p *ngIf="task.isCompleted && !task.error" class="success-text">Upload erfolgreich abgeschlossen!</p>
  </div>
</div>

5. 可选：添加样式优化 #

为了让进度条看起来更友好，添加一些基础CSS样式：

.upload-list {
  margin-top: 1rem;
}

.upload-item {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
}

.progress-container {
  height: 24px;
  width: 100%;
  background-color: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.progress-bar {
  height: 100%;
  background-color: #2196F3;
  transition: width 0.2s ease-in-out;
}

.error-text {
  color: #f44336;
  margin: 0.5rem 0 0;
}

.success-text {
  color: #4CAF50;
  margin: 0.5rem 0 0;
}

这样修改后，每次选择多文件上传时，每个文件都会有自己独立的进度条，实时显示上传进度，同时还能展示错误或成功状态，用户体验会好很多！

内容的提问来源于stack exchange，提问作者Vueer