使用 AngularFireStorage 为多张图片上传显示不同的进度条答案

【问题标题】：Show different progress bars for multiple image upload with AngularFireStorage使用 AngularFireStorage 为多张图片上传显示不同的进度条
【发布时间】：2023-03-03 11:59:01
【问题描述】：

我按照本教程在我的 Angular4 应用程序中使用 dropZone 构建图像上传功能：Firebase Storage With AngularFire - DropZone File Uploader

单次上传效果很好。但我需要一个多重上传功能。所以我把我的代码改成这样：

组件

startUpload(event: FileList) {

 Array.from(event).forEach(file => {
   if (file.type.split('/')[0] != 'image') {
     alert('Dieses Dateiformat wird nicht unterstützt');
   }

   // Storage path
   const path = `uploads/${this.currentUserEmail}_${file.name}`;

   // Meta Data
   const customMetadata = {
     auction: 'test'
   }

   // Main Task
   this.task = this.storage.upload(path, file, {customMetadata});

   // Progress Monitoring
   this.percentage = this.task.percentageChanges();
   this.snapshot = this.task.snapshotChanges();

   // File Download Url
   this.downloadURL = this.task.downloadURL();
 })
}

前端

<div class="dropzone" dropZone (hovered)="toggleHover($event)" (dropped)="startUpload($event)" [class.hovering]="isHovering">
    <h3>Upload</h3>
    <p>Ziehe Deine Fotos via Drag & Drop in die rechteckige Fläche oder klick auf "Datei auswählen"</p>
    <div class="file">
      <input multiple="multiple" class="file-input" type="file" (change)="startUpload($event.target.files)">
    </div>

    <div *ngIf="percentage | async as pct">
      <progress [value]="pct" max="100"></progress>
    </div>

    <div *ngIf="(snapshot | async) as snap">
      {{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }}
    </div>

  </div>

  <ul class="list-group">
    <div *ngIf="downloadURL | async">
      <h3>Results</h3>
      <li class="list-group-item">
        <img [src]="u" alt="Bild" height="100">
      </li>
    </div>
  </ul>

函数startUpload 将所有图像正确写入存储，但在前端我不知道为所有图像显示单独的进度条或为正确上传的图像显示单独的结果。它仅显示有关最后一张图像的信息。

例如，如何编写代码以显示不同图像的多个进度条？

我尝试了什么

这样想：

<div *ngFor="let pct of percentage | async">
 <progress [value]="pct" max="100"></progress>
</div>

....但没有成功....有什么想法吗？

【问题讨论】：

标签： angular firebase file-upload firebase-storage angularfire2

【解决方案1】：

您可以像这样创建一个包含所有已删除文件的数组：

startUpload(event: FileList) {

 Array.from(event).forEach(file => {
   if (file.type.split('/')[0] != 'image') {
     alert('Dieses Dateiformat wird nicht unterstützt');
   }

   const path = `uploads/${this.currentUserEmail}_${file.name}`;
   const customMetadata = {
     auction: 'test'
   }
   const task = this.storage.upload(path, file, {customMetadata});
   const percentage = this.task.percentageChanges();
   const snapshot = this.task.snapshotChanges();
   const fileRef = this.storage.ref(path);
   const downloadURL = this.task.getDownloadURL();

   this.files.push({
      task: task,
      percentage: percentage,
      snapshot: snapshot,
      filename: filename,
      downloadURL: downloadURL
    });
 })
}

然后像这样在前端迭代它

<div *ngFor="let file of files">
  {{ file.filename }}
  <div *ngIf="file.percentage | async as pct">
    <progress class="progress is-info" 
              [value]="pct" 
              max="100">        
    </progress>
    {{ pct | number }}%
  </div>


  <div *ngIf="(file.snapshot | async) as snap">
    {{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }} 
  </div>

</div>

【讨论】：