使用AngularFireStorage显示用于多个图像上传的不同进度条

时间:2018-03-20 14:08:11

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

我按照本教程在Angular4 App中使用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>

....但没有成功......任何想法?

1 个答案:

答案 0 :(得分:0)

您可以创建所有已删除文件的数组,如下所示:

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>