AngularFire2 - Firebase 存储 getDownloadURL() - 如何返回 firestore 的 url

Question

我一直在浏览 angularfire2 文档以从存储中检索 downloadURl。 我希望我在这里遗漏了一些简单的东西。

文件指出：

@Component({
  selector: 'app-root',
  template: `<img [src]="profileUrl | async" />`
})
 export class AppComponent {
   profileUrl: Observable<string | null>;
   constructor(private storage: AngularFireStorage) {
   const ref = this.storage.ref('users/davideast.jpg');
   this.profileUrl = ref.getDownloadURL();
 }
}

但是，一旦我上传了图片，我想将下载 url 作为字符串返回以上传到 firestore。 我需要外部服务的下载 URL。

我的功能

uploadImage(base64data) {

  const filePath = (`myURL/photo.jpg`);
  const storageRef = firebase.storage().ref();

  var metadata = {
    contentType: 'image',
    cacheControl: "public, max-age=31536000",
  };

  const ref = this.storage.ref(filePath);
  const task = ref.putString(base64data, 'data_url', metadata).then(() => {

    var downloadURL = ref.getDownloadURL();

  })

}

这可以完美地上传图像。 但是，我想将下载 URL 写入 firestore。 当控制台记录我的“downloadURL”变量时，我得到以下信息：

PromiseObservable {_isScalar: false, promise: y, scheduler: undefined}

下载在 promise observable 中。 如何将下载 URL 字符串作为我的变量？ 一旦我有了它，我就可以整理出 firestore 更新。

Answer 1

//observable to store download url
downloadURL: Observable<string>;

task.snapshotChanges().pipe(
    finalize(() => {
        this.downloadURL = fileRef.getDownloadURL();
        this.downloadURL.subscribe(url=>{this.imageUrl = url})
    })
)

参考：https ://github.com/ReactiveX/rxjs/blob/master/doc/observable.md

Answer 2

嵌套订阅是一种反模式，因此您应该使用last + switchMap或concat + defer而不是在finalize中订阅。

最后+ switchMap

task.snapshotChanges().pipe(
  last(),
  switchMap(() => fileRef.getDownloadURL())
).subscribe(url => console.log('download url:', url))

连接+延迟

concat(
  task.snapshotChanges().pipe(ignoreElements()),
  defer(() => fileRef.getDownloadURL())
).subscribe(url => console.log('download url:', url))

Answer 3

这个答案与 Firebase 5.0 版本无关，他们从上传任务中删除了 downloadURL() 。 请参考文档。

.downloadURL() observable 在上传完成后发出下载 URL 字符串。 然后你需要订阅才能获得价值。

uploadImage(base64data) {

  const filePath = (`myURL/photo.jpg`);
  //const storageRef = firebase.storage().ref();

  var metadata = {
    contentType: 'image',
    cacheControl: "public, max-age=31536000",
  };

  const ref = this.storage.ref(filePath);
  const task = ref.putString(base64data, 'data_url', metadata);
  const downloadURL = task.downloadURL();

  downloadURL.subscribe(url=>{
     if(url){
         console.log(url);
         //wirte the url to firestore
     }
  })

}

希望这可以帮助。 查看此博客了解更多详情

Answer 4

.downloadURL()不再有效，您需要将.getDownloadURL()与finalize() ) 结合使用，如下所示：

.html文件

<input type="file" (change)="uploadFile($event)">

.ts文件

import {
  AngularFireStorage,
  AngularFireStorageReference,
  AngularFireUploadTask
} from '@angular/fire/storage';
import { Component } from '@angular/core';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent {
    constructor(private angularFireStorage: AngularFireStorage) {}

    public uploadFile(event: any): void {
        for (let i = 0; i < event.target.files.length; i++) {
            const file = event.target.files[i];
            const fileRef: AngularFireStorageReference = this.angularFireStorage.ref(
              file.name
            );
            const task: AngularFireUploadTask = this.angularFireStorage.upload(
              file.name,
              file
            );
            task
                .snapshotChanges()
                .pipe(
                finalize(() => {
                    fileRef.getDownloadURL().subscribe(downloadURL => {
                        console.log(downloadURL);
                    });
              })
          )
          .subscribe();
       }
   }
}  

另外，请注意@angular/fire ，这是因为所有AngularFire2包都移到了@angular/fire中，这是从现在开始推荐使用的方式。