如何從 Firebase 存儲中獲取調整大小的圖像下載 URL

Question

語境

我從文件輸入中傳遞圖像，然后將該圖像上傳到 firebase。 我正在使用 firebase 調整圖像擴展名的所有默認設置，因此圖像調整為 200x200，並且沒有文件路徑或文件夾。

問題

我看過一些與此問題類似的帖子，但是對於如何在調整圖像大小后獲取 downloadURL 沒有任何好的答案。 你能解釋一下在這種情況下我會怎么做嗎？

非常感謝！

    sendImageToFirebase(image, userId) {
            const imageName = image.name;
            const extension = image.type.split('/')[1].trim();
            const imageSize = image.size;
            const metadata = { contentType: image.type, name: imageName, size: imageSize };

            const storageRef = storage.ref(`posts/${userId}/${imageName}.${extension}`);
            const uploadTask = storageRef.put(image, metadata);

            uploadTask.on('state_changed', (snapshot) => {
                    // Snapshot data ...
                }, (error) => {
                    // Error Handling ...
                },  () => {
                    uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                        this.photoUrl = downloadURL;
                    });
                },
            );
        },

Answer 1

只是為了澄清-您已經有了downloadURL- this.photoUrl （我注意到您從未聲明過）。

我假設您的data()中有photoUrl: null 。 然后您可以在模板中{{ photoUrl }}查看實際地址或

<div v-if="photoUrl">
<img :src="photoUrl" />
</div

顯示上傳的圖像。

就個人而言，然后我創建了第二種方法將其上傳到我的 FirestoreDB，所以我可以包括

uploadToDB(this.photoUrl)在你的 function 然后調用

uploadToDB(url){
         db.collection("images")
        .add({
           url }),
        })
        .then(() => {
          this.message = "Successful Image URL Upload to FirestoreDB"
        });
    }
  },