gpt4 book ai didi

javascript - @angular/火 AngularFireStorage getDownloadUrl()

转载 作者:行者123 更新时间:2023-11-30 09:18:15 26 4
gpt4 key购买 nike

我正在尝试使用新的@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",
"firebase": "^5.5.9",
"cordova-android": "~7.0.0",

谢谢。

最佳答案

代码中还有其他一些小的结构更改,而不仅仅是重命名方法。

查看 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()

关于javascript - @angular/火 AngularFireStorage getDownloadUrl(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53480280/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com