如何等待值然后返回一个对象

Question

我正在将图像文件上传到服务器，并想用我的上传方法返回下载网址和上传百分比。

目前这可行，但将来，我希望能够使用相同的组件上传多张图片，并在上传表单下方显示一个表格，其中包含成功上传的文件名，以及删除它们的按钮。

我想知道是否有人可以为我指明正确的方向，只要有新上传的文件可用，就可以使用 Promise 或异步回调来完成本质上将新的 { downloadURL : Observable<string>, uploadPercentage : Observable<number> } 对象推送到数组。

上传方法，在upload-form component.ts中

  upload(file) {
    // this.id = Math.random().toString(36).substring(2);
    
    const folder = this.mode == 'single' ? 'titleCardImages' : 'contentImages' 


    const filePath = `${folder}/${file.name}`;
    const fileRef = this.afStorage.ref(filePath);
    const task = this.afStorage.upload(filePath, file)
    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => this.downloadURL = fileRef.getDownloadURL() )
    )
    .subscribe()
    }

editNewsComponent.html（摘录）垫子对话框

<h2 mat-dialog-title>Create, Update or delete news</h2>

<mat-dialog-content [formGroup]="form">

  <mat-form-field>
      <input matInput
              placeholder="Title"
              formControlName="title">
  </mat-form-field> <br>


  <br><label for="titleCardImage">Title Card Image:</label> <br>
  <upload-image
    mode="single"
    label="Enter a title card image">
  </upload-image>


  <!-- <button (click)="fileInput.click()">
    <span>Select</span>
    <input #fileInput type="file" (change)="upload($event)" style="display:none;" />
    
  
  </button> <br> -->


  


  <mat-form-field>
    <textarea matInput
            placeholder="a short description"
            formControlName="description"></textarea>
  </mat-form-field> <br>

  <mat-form-field>
    <textarea matInput
            placeholder="Body/Content of the news piece"
            formControlName="body"></textarea>
  </mat-form-field> <br>


  <label id="example-radio-group-label">Tags: <br></label>
  <mat-chip-list aria-label="tag selection" >
    <mat-chip>One fish</mat-chip>
    <mat-chip>Two fish</mat-chip>
    <mat-chip color="primary" selected>Primary fish</mat-chip>
    <mat-chip color="accent" selected>Accent fish</mat-chip>
  </mat-chip-list>
  
</mat-dialog-content>

<mat-dialog-actions>
    
  <button
    mat-stroked-button
    (click)="reset()"
    >
    Clear
  </button>
  <button
    mat-dialog-close
    mat-stroked-button>
    Cancle
  </button>
  <button
    (click)="save()"
    mat-raised-button>
    Save
  </button>

  <p>Form data: {{ form.value | json }}</p>

</mat-dialog-actions>

非常感谢任何帮助

Answer 1

这当然是可能的，您需要根据项目的设计进行调整

Fireship.io 有一个非常好的 Angular/Fire 解决方案 来源：https://fireship.io/lessons/angular-firebase-storage-uploads-multi/

上传任务.component.ts

import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { finalize, tap } from 'rxjs/operators';

@Component({
  selector: 'upload-task',
  templateUrl: './upload-task.component.html',
  styleUrls: ['./upload-task.component.scss']
})
export class UploadTaskComponent implements OnInit {

  @Input() file: File;

  task: AngularFireUploadTask;

  percentage: Observable<number>;
  snapshot: Observable<any>;
  downloadURL: string;

  constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }

  ngOnInit() {
    this.startUpload();
  }

  startUpload() {

    // The storage path
    const path = `test/${Date.now()}_${this.file.name}`;

    // Reference to storage bucket
    const ref = this.storage.ref(path);

    // The main task
    this.task = this.storage.upload(path, this.file);

    // Progress monitoring
    this.percentage = this.task.percentageChanges();

    this.snapshot   = this.task.snapshotChanges().pipe(
      tap(console.log),
      // The file's download URL
      finalize( async() =>  {
        this.downloadURL = await ref.getDownloadURL().toPromise();

        this.db.collection('files').add( { downloadURL: this.downloadURL, path });
      }),
    );
  }

  isActive(snapshot) {
    return snapshot.state === 'running' && snapshot.bytesTransferred < snapshot.totalBytes;
  }

}