多图像上传：每次上传的进度条

Question

对于我的Angular4应用程序，每个图像上传都需要不同的进度条。 （使用AngularFireStore存储）

我的组件

percentageArray = [];

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}/${this.uniqueID}/${file.name}`;

  // Meta Data
  const customMetadata = {
    auctionID: this.uniqueID.toString()
  }

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

  // Progress Monitoring

  this.percentage = this.task.percentageChanges();
  this.percentage.subscribe(p => {
    this.percentageArray.push(p);
  })

  this.snapshot = this.task.snapshotChanges();

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

  this.imgArray.push(path);

 })
}

我的HTML

<div *ngIf="percentageArray as item" class="w-100">
  <div *ngFor="let elem of item">
  <ngb-progressbar type="info" [value]="elem" [striped]="true" [max]="100" [showValue]="true"></ngb-progressbar>
  </div>
</div>

结果

对于每个状态，我都会获得一个新的进度条...我如何强制将它组合在一起进行每次上传？

Answer 1

您需要使用当前文件的索引。

startUpload(event: FileList) {  Array.from(event).forEach((file, index) => { // <-- separate index for each file
    if (file.type.split('/')[0] != 'image') {
      alert('Dieses Dateiformat wird nicht unterstützt');
    }

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

// Meta Data
const customMetadata = {
  auctionID: this.uniqueID.toString()
}

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

// Progress Monitoring

this.percentage = this.task.percentageChanges();
this.percentage.subscribe(p => {
  this.percentageArray[index] = p; // <--- just put new percentage to needed index
})

this.snapshot = this.task.snapshotChanges();

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

this.imgArray.push(path);})}

然后从html中删除一个循环

<div *ngIf="percentageArray as item" class="w-100"> 
<ngb-progressbar type="info" [value]="item" [striped]="true"
[max]="100" showValue]="true"></ngb-progressbar></div>

Answer 2

它不应该是一个数组（可能是一个包含键和值的数组，但随后更新会更复杂）。

e.g。

percentageArray = {};

this.percentage.subscribe(p => {
    // Update percentage for this file.
    this.percentageArray[file.name] = p;
});

不确定如何最好地迭代Angular HTML中的对象键/值，但你可能会在SO上找到答案。