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

Question

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

用于选择图像的 typescript 文件

 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 的最佳方法，以便我可以轻松检索图像。 我在想可以将图像存储为 map 或像这样的 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"
}

Answer 1

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

以下信息归功于此答案：

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

基于上述，我建议选择根级 collections作为结构。

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

有关将 Firebase 云存储与 Angular 结合使用的更多信息，请参见此处。

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

让我知道这是否有帮助。