Question

我是编程新手，正在尝试创建Angular应用。我需要将照片上传到Firebase中，还需要获取URl才能显示图片。这是我的代码：

chooseFiles(event) {
this.selectedFiles = event.target.files;
if (this.selectedFiles.item(0))
  this.uploadpic();  
}

uploadpic() {
let file = this.selectedFiles.item(0);
let uniqkey = 'pic' + Math.floor(Math.random() * 1000000);
const uploadTask = this.storage.upload('/angfire2store/' + uniqkey,  file);
this.imgsrc = uploadTask.downloadURL();
};

似乎downloadURL（）在Firestorage中不再起作用。您能帮我一个解决方案吗？我也尝试过getDownloadUrl（），但仍然遇到相同的问题。

Answer 1

downloadURL方法返回Observable，因此，例如在模板中显示imgsrc变量async管道就足够了。

另一种情况是您只想给imgsrc分配URL，这样是一种方法：

uploadTask.downloadURL().subscribe(url => this.imgsrc = url);

Answer 2

为了在组件中显示它。只需将您从firebase获得的url结果绑定到一个类变量，然后将其显示在模板中即可。您可以这样做：

imageURL: string = '';

uploadpic() {
let file = this.selectedFiles.item(0);
let uniqkey = 'pic' + Math.floor(Math.random() * 1000000);
const pathFile='/angfire2store/' + uniqkey;
const uploadTask = this.storage.upload(pathFile, file).then(() => {
     const ref = this.storage.ref(pathFile);
     const downloadURL = ref.getDownloadURL().subscribe(url => { 
     const this.imageURL = url;
     console.log(Url);
 });
})

然后在您的模板文件中，可以像这样绑定图像的src：

<img [src]="imagePath" />

您正在尝试显示const Url，它位于uloadpic函数的范围内，并且无法在其外部访问。

我希望这会有所帮助。

Answer 3

谢谢！我已经解决了这个问题：

uploadpic() {
let file = this.selectedFiles.item(0);
let uniqkey = 'pic' + Math.floor(Math.random() * 1000000);
const pathFile='/angfire2store/' + uniqkey;
const uploadTask = this.storage.upload(pathFile, file).then(() => {
     const ref = this.storage.ref(pathFile);
     const downloadURL = ref.getDownloadURL().subscribe(url => { 
     const Url = url;
     console.log(Url);
 });

})

，但是我仍然无法在页面上显示它。我已经尝试使用img src ='{{url}}'和{{url | async}}，但是仍然没有结果。

如何从Firebase获取URL图像？

3 个答案: