时间戳

首页 > 解决方案 > 将多个用户图像上传到 Firestore 集合的最佳方式是什么？使用 Angular/Ionic 4

javascript - 将多个用户图像上传到 Firestore 集合的最佳方式是什么？使用 Angular/Ionic 4

问题描述

我正在 Ionic 4 中构建一个图像博客应用程序。我的用例是允许用户将多个图像文件上传到同一个博客文章。我已经拥有的代码允许我一次将一张图像上传到集合中。目前，当用户上传图片时，图片会存储在 Firebase 存储中，然后在用户的 Firestore 文档中引用该图片。

用于选择图像的打字稿文件

 openImagePicker(){
    this.imagePicker.hasReadPermission()
    .then((result) => {
      if(result == false){
        // no callbacks required as this opens a popup which returns async
        this.imagePicker.requestReadPermission();
      }
      else if(result == true){
        this.imagePicker.getPictures({
          maximumImagesCount: 10
        }).then(
          (results) => {
            for (var i = 0; i < results.length; i++) {
              this.uploadImageToFirebase(results[i]);
            }
          }, (err) => console.log(err)
        );
      }
    }, (err) => {
      console.log(err);
    });
  }

服务文件

createTask(value){
    return new Promise<any>((resolve, reject) => {
      let currentUser = firebase.auth().currentUser;
      this.afs.collection('tasks')
      .add({
        category: value.category,
        title: value.title,
        description: value.description,
        image: value.image,
        uid: currentUser.uid
      })
      .then(
        res => resolve(res),
        err => reject(err)
      )
    })

 uploadImage(imageURI, randomId){
    return new Promise<any>((resolve, reject) => {
      let storageRef = firebase.storage().ref();
      let imageRef = storageRef.child('image').child(randomId);
      this.encodeImageUri(imageURI, function(image64){
        imageRef.putString(image64, 'data_url')
        .then(snapshot => {
          snapshot.ref.getDownloadURL()
          .then(res => resolve(res))
        }, err => {
          reject(err);
        })
      })
    })
  }

我试图找出将多个图像文件存储到 Firestore 的最佳方法，以便我可以轻松检索图像。我在想可以像这样将图像作为地图或数组存储在firestore文档中但是，这是检索图像的好结构吗？

任务 -> 任务 ID ->

{ 
category:
"Art"
description:
"This is a description"
image: 
0
"https://firebasestorage.googleapis.com/v0/b/wippy-1962c.appspot.com/o/image%2F6cu63? 
alt=media&token=2eab2208-9399-4cf7-89d8-f709d93c4ufn"
1
"https://firebasestorage.googleapis.com/v0/b/wippy-1962c.appspot.com/o/image%2Fshook.png? 
alt=media&token=ebed3a28-b2ed-423a-a19d-f5849134045e"
2
"https://firebasestorage.googleapis.com/v0/b/wippy-1962c.appspot.com/o/image%2Fpatrick.png? 
alt=media&token=33062fb2-a3dc-4077-9390-cbeb60a654a0"
}

标签： javascriptangularionic-frameworkgoogle-cloud-firestorefirebase-storage

解决方案

但是，这是检索图像的好结构吗？

以下信息归功于此答案：

” 您需要知道，构建 Cloud Firestore 数据库没有“完美”、“最佳”或“正确”的解决方案。最佳和正确的解决方案，是适合您的需求并使您的工作更轻松的解决方案。熊还要记住，在 NoSQL 数据库的世界中也没有单一的“正确的数据结构”。所有数据都经过建模以允许您的应用程序所需的用例。这意味着适用于一个应用程序的东西可能不足以用于另一个应用程序应用程序。因此，没有一个适合每个人的正确解决方案。NoSQL 类型数据库的有效结构完全取决于您打算如何查询它。

基于以上内容，我建议选择根级集合作为结构。

做了一点研究，我发现了一些有趣的服务，比如Firebase Cloud Storage。

可以在此处找到有关将 Firebase Cloud Storage 与 Angular 结合使用的更多信息。

如果你有兴趣，这个人也有一些关于使用 Angular 的 Ionic的有趣教程和文章

让我知道这是否有帮助。

推荐阅读