將多個用戶圖像上傳到 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

讓我知道這是否有幫助。