如何从 Firebase 存储中获取调整大小的图片下载 URL答案

【问题标题】：How to get resized image downloadedURL from Firebase Storage如何从 Firebase 存储中获取调整大小的图片下载 URL
【发布时间】：2021-03-30 05:28:15
【问题描述】：

上下文

我从文件输入中传递图像，然后将该图像上传到 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;
                    });
                },
            );
        },

【问题讨论】：

您能分享一下您配置扩展的方式吗？云函数有一种可能会将下载 URL 保存到 Firestroe 文档。

标签： javascript firebase vue.js firebase-storage firebase-extensions

【解决方案1】：

澄清一下——你已经有了downloadURL - this.photoUrl（我注意到你从未声明过）。

我假设您的data() 中包含photoUrl: null。然后你可以在你的模板中{{ photoUrl }}查看实际地址或

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

显示上传的图片。

就个人而言，我创建了第二种方法将其上传到我的 FirestoreDB，因此我可以包含

uploadToDB(this.photoUrl) 在你的函数中然后调用

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

【讨论】：