上传图片参考网址保存在firestore中

Question

我的堆栈闪电战：https://stackblitz.com/edit/upload-image-ref-firestore?embed=1&file=src/app/app.component.html

我正在使用 AngularFire2 上传图片，我想知道如何将 Firebase 存储图片的引用保存在 firestore 文档中。

我正在尝试，但我得到的只是一个空字段：

有什么想法吗？

组件.ts

import { Component, OnInit, ViewChild  } from '@angular/core';
import { finalize } from 'rxjs/operators';
import { AngularFireStorage } from 'angularfire2/storage';
import { Observable } from 'rxjs';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FirebaseService } from './services/firebase.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  tests: Observable<any[]>;
 
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;

  forma: FormGroup;
  @ViewChild('f') form;

  constructor(fb: FormBuilder, private fs: FirebaseService, private storage: AngularFireStorage ) { 
    this.forma = fb.group ({
      imagenDestacada: [ '', Validators.required],

    })
  }

  ngOnInit() {
    this.tests = this.fs.getTests();
  }

  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = `proyectos4/name1`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.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()
        this.fs.addTest(this.forma.value)
        console.log( this.downloadURL ) 
      })    
    )
    .subscribe()

  }


}

html

<h2>Test upload ref save in firestore</h2>

<form #f="ngForm" [formGroup]="forma" (ngSubmit)="crearTest()" novalidate>
  <input type="file" (change)="uploadFile($event)" />
  <br>
  <br>
  <div>{{ uploadPercent | async }}</div>
  <br>
  <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
  <br>
  <input type="text" formControlName="imagenDestacada" [value]="downloadURL | async" placeholder="url Image">
  <br>
  <br>
  <!-- <button type="submit" [disabled]="!forma.valid">Crear Test</button> -->
</form>

<hr>

<ul>
  <li *ngFor="let test of tests | async">Imagen: {{test.imagenDestacada}}</li>
</ul>

Answer 1

调用 fileRef.getDownloadURL() 不会直接返回下载 URL。相反，它返回一个 Promise，当下载 URL 可用时解析。这意味着在记录下载 URL 或将其写入数据库之前，您需要等待 promise 解决：

task.snapshotChanges().pipe(
  finalize(() => {
    fileRef.getDownloadURL().then((url) => {
      this.downloadURL = url;
      this.fs.addTest(this.forma.value)
      console.log( this.downloadURL ) 
    });
  })    
)