在 Ionic 3 中从 Firebase 检索照片

Question

我正在开发一个 Ionic 3 手机壁纸应用程序，我正在使用 Firebase 数据库上传照片，现在我正在尝试在应用程序中显示这些照片

就像我上传 3 张照片（1.jpg、2.jpg、3.jpg）一样，我编写此代码以从数据库中获取它们。

 imageSource;
 photo;



 constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.imageSource = (1);
    this.getPhotoURL();
  }

  getPhotoURL() {
    firebase.storage().ref().child('/' + this.imageSource + '.jpg').getDownloadURL().then((url) => {
      this.photo = url;
    })
  }

在 HTML 中我有这个

<ion-col>
     <img src="{{photo}}">
</ion-col>

但是只能得到我在.|| this.imageSource = (1);" ||.写的照片名 每次我想获得一张新照片时，我都必须制作一个新功能。

那么我怎样才能为我上传的任何照片自动更新 或者我需要一个更好的代码，可以让我轻松检索这 3 张照片？

Answer 1

当你上传文件时，你必须用 uploadTask.snapshot.downloadedURL 获取 downloadURL 并保存，像这样

public downloadedUrls: [];

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', function(snapshot){

  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  this.downloadedUrls.push(uploadTask.snapshot.downloadURL);
});

例如，使用下载的UR，您可以保存在一个数组中，然后，您可以在html中循环这个数组，其中包含保存图像中的所有url，如下所示：

<ion-col *ngFor="let photo of downloadedUrls">
   <img src="{{ photo }}">
</ion-col>

例如，其中下载的Urls 可以是字符串数组。我让自己明白了吗？

希望对你有帮助。

Ps：我从Firebase Storage Docs得到的上传方式，大家可以查看

https://firebase.google.com/docs/storage/web/upload-files?hl=pt-br