angularfire2 上传后显示图片

Question

使用来自Example Usage 的示例代码。我能够成功上传图像文件并显示它的链接。但是，我想在上传后立即在 img 标签中显示图像，而不是链接。我将如何做到这一点？我尝试过这样的事情无济于事：

  profileUrl: Observable<string | null>;

  ....


  const task = this.storage.upload(path, file);
  const ref = this.storage.ref(path);
  this.uploadPercent = task.percentageChanges();
  console.log('Image uploaded!');

  task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = this.profileUrl = ref.getDownloadURL())
  )
  .subscribe();

在我的模板文件中：

<img [src]="profileUrl | async" />

所有这些都来自示例，但我需要将 Example Usage 与 Download Files 部分结合起来。

Answer 1

我想通了。您不能订阅快照，但您可以订阅下载参考。

  const task = this.storage.upload(path, file);
  const ref = this.storage.ref(path);
  this.uploadPercent = task.percentageChanges();
  console.log('Image uploaded!');
  task.snapshotChanges().pipe(
    finalize(() => {
      this.downloadURL = ref.getDownloadURL()
      this.downloadURL.subscribe(url => (this.image = url));
    })
  )
  .subscribe();

Answer 2

我最近做了这样的事情。我的任务是上传一张图片，然后让该图片出现在用于上传图片的同一页面上。我在“上传”服务器上编写了 WebAPI，此示例不使用 angular2fire，因此在您的 angular2fire 订阅响应中，您将绑定变量更新为 [src]。

HTML：

<img *ngIf="uploaded" [src]="myURL"> 

TS：

uploadedImage = "savedNameOfUploadedFile.png";
uploaded = false;
myURL = '';
uploadImage(){
    this._httpClient.post(this.apiEndPoint + '/imageupload', formdata)
    .subscribe(
        data => {
            this.uploaded = true;
            this.myURL = 'http://locationOfFileServer/' + this.uploadedImage;
          },
        error => { console.log(error); }
    );
}

我的代码要复杂得多，但为了便于阅读，这是一个精简版。我使用 BehaviorSubject 与我的上传服务和我的视图组件进行通信，但就像我说的那样，这是一个简化版本以提高可读性。如果您需要更多详细信息，请告诉我，我将复制/粘贴我的生产代码。