@angular/fire AngularFireStorage getDownloadUrl()

Posted 2023-03-22

【中文标题】@angular/fire AngularFireStorage getDownloadUrl()

【英文标题】：

【发布时间】：2019-04-28 01:10:36

【问题描述】：

我正在尝试使用新的@angular/fire 5.1.0 使用 AngularFireStorage 查看上传到 firebase 的图像。 我以前可以在 angularfire2 中使用task.downloadURL()

"如果我错了请纠正我，但现在我必须使用afStorage.getDownloadURL() 请您帮助我正确设置 imageUrl。

import  AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask  from '@angular/fire/storage'
....
        downloadURL: Observable<string>; 
        imageUrl: string;
....

async onGetFromGallery()
  try ....
    const imageData = await this.camera.getPicture(options);
    const image = 'data:image/jpeg;base64,' + imageData;
    const id = Math.random().toString(36).substring(2);
    const user = this.authenticatorService.getUser();
    this.ref = this.afStorage.ref(user.uid + '/images/categories/'+id);
    this.task = this.ref.putString(image, 'data_url');

    //--- Previously:angularfire2:
    // this.downloadURL = this.ref.getDownloadURL();
    // this.downloadURL.subscribe(url=> this.imageUrl=url);
    //--- now replaced by this.ref.getDownloadURL()...

    //My Attempt - unable to getDownloadUrl?
    this.task
    .snapshotChanges().toPromise().then(_ =>
       
        this.ref.getDownloadURL().toPromise().then(res => 
          console.log('URL: ', res);
          this.imageUrl = res;
        );
      )

   catch(e) 
    console.error(e);
    this.errorMessage = JSON.stringify(e);
  

查看摘录：

<img [src]="imageUrl"  style="width:100%;">

package.json 摘录：

"@angular/compiler-cli": "5.2.11", "@angular/fire": "^5.1.0", “火力基地”：“^5.5.9”， "cordova-android": "~7.0.0",

谢谢。

【问题讨论】：

根据github.com/angular/angularfire2/blob/master/docs/storage/…，你应该只需要this.imageUrl = ref.getDownloadURL()。

请查看https://***.com/a/57267424/11127383 以了解此时它是如何工作的。

【参考方案1】：

代码中还有一些其他小的结构变化，不仅仅是重命名方法。

查看标题为“监控上传百分比”部分下的the example code in the official AngularFire2 docs。具体来说，它们包括的示例上传功能：

uploadFile(event) 
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    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() )
     )
    .subscribe()

更具体地说，该函数的这一部分，监听器......

// get notified when the download URL is available
task.snapshotChanges().pipe(
    finalize(() => this.imageUrl = fileRef.getDownloadURL() )
 )
.subscribe()

它会在上传完成并使用 URL 填充 this.downloadURL 变量时触发。您已经定义了fileRef，在您的代码中它只是ref，所以以下应该可以工作，但未经测试：

    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => this.downloadURL = ref.getDownloadURL() )
     )
    .subscribe()

【讨论】：

谢谢杰里米。只有最后一件事。我在测试时收到以下错误：[ts] 找不到名称“finalize”。 [2304]。我错过了导入还是什么？

听起来很像，你需要在该组件的顶部import finalize from 'rxjs/operators';

嗨@JeremyW。请您帮忙解答后续问题吗？谢谢 ;-) ***.com/questions/53853189/…