Angular4+AngularFireStore实现多图上传单文件独立进度条

我来帮你补全这个多图上传的实现，刚好你已经定义了percentageArray，我们可以基于这个数组来绑定每张图片的独立进度条，结合AngularFireStorage完成上传并把图片信息存入FireStore。

第一步：补全startUpload方法代码 #

这里我们会为每个文件创建独立的上传任务，监听进度并实时更新percentageArray，上传完成后把图片URL存入FireStore：

import { finalize } from 'rxjs/operators';
// 确保已经在构造函数中注入依赖
constructor(
  private angularFireStorage: AngularFireStorage,
  private angularFireStore: AngularFirestore
) {}

startUpload(event: FileList) {
  // 清空旧的进度数据，避免重复上传时状态混乱
  this.percentageArray = [];
  
  Array.from(event).forEach((file, index) => {
    // 图片格式校验
    if (file.type.split('/')[0] !== 'image') {
      alert('Dieses Dateiformat wird nicht unterstützt');
      // 标记该文件为无效，模板可据此展示错误提示
      this.percentageArray[index] = -1;
      return;
    }

    // 初始化当前文件的进度为0
    this.percentageArray[index] = 0;

    // 定义Storage存储路径
    const path = `uploads/${this.currentUserEmail}/${this.uniqueID}/${file.name}`;
    // 自定义元数据，方便后续关联拍卖ID
    const customMetadata = { auctionID: this.uniqueID.toString() };

    // 创建上传任务
    const uploadTask = this.angularFireStorage.upload(path, file, { customMetadata });

    // 监听上传进度，实时更新对应索引的进度值
    uploadTask.percentageChanges().subscribe(percentage => {
      this.percentageArray[index] = percentage;
    });

    // 上传完成后，获取下载URL并存入FireStore
    uploadTask.snapshotChanges().pipe(
      finalize(() => {
        // 获取图片的永久下载链接
        this.angularFireStorage.ref(path).getDownloadURL().subscribe(imageUrl => {
          // 将图片信息写入FireStore集合
          this.angularFireStore.collection('auction_images').add({
            auctionID: this.uniqueID,
            userEmail: this.currentUserEmail,
            imageUrl: imageUrl,
            fileName: file.name,
            uploadTimestamp: new Date()
          }).then(() => {
            console.log('图片信息已成功存入FireStore');
          }).catch(error => {
            console.error('FireStore写入失败:', error);
          });
        });
      })
    ).subscribe();
  });
}

第二步：模板中渲染独立进度条和图片预览 #

在组件模板里，我们遍历percentageArray，为每个文件渲染对应的进度条和预览（可选）：

<!-- 文件选择控件 -->
<input type="file" accept="image/*" multiple (change)="startUpload($event.target.files)">

<!-- 遍历显示每个文件的上传状态 -->
<div class="upload-item" *ngFor="let progress of percentageArray; let i = index">
  <!-- 无效文件提示 -->
  <div *ngIf="progress === -1" class="invalid-file">
    <p>第{{i+1}}个文件不是图片格式，无法上传</p>
  </div>

  <!-- 有效文件的预览和进度条 -->
  <div *ngIf="progress !== -1" class="valid-file">
    <!-- 图片预览（可选，利用FileReader生成本地预览） -->
    <img [src]="getPreviewUrl(event.target.files[i])" alt="图片预览" style="width: 120px; height: 120px; object-fit: cover;">
    
    <!-- 进度条容器（这里用Bootstrap样式，你也可以自定义） -->
    <div class="progress mt-2" style="height: 20px;">
      <div 
        class="progress-bar progress-bar-striped progress-bar-animated" 
        [style.width.%]="progress"
        role="progressbar"
      >
        {{progress | number:'1.0-0'}}%
      </div>
    </div>
  </div>
</div>

如果需要图片预览，可以在组件里加一个辅助方法：

getPreviewUrl(file: File): string {
  return URL.createObjectURL(file);
}

关键注意事项 #

• 确保你的Angular模块已经导入了AngularFireStorageModule和AngularFirestoreModule，并完成Firebase初始化配置
• 可以把上传任务存储到一个数组中（比如uploadTasks: AngularFireUploadTask[] = []），方便后续提供取消上传的功能
• 建议为进度订阅添加错误处理，避免上传失败时出现未捕获异常
• FireStore的集合名称可以根据你的业务需求调整，比如auction_images改成你自己的集合名

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