如何从 Firebase Storage 获取调整大小的图片下载 URL

问题描述

背景

我正在从文件输入传递图像，然后将该图像上传到 firebase。我正在使用 firebase 调整大小图像扩展的所有默认设置，因此图像大小调整为 200x200，并且没有文件路径或文件夹。

问题

我看过一些与此问题类似的帖子，但没有关于如何在调整图像大小后获取下载 URL 的任何好的答案。你能解释一下在这种情况下我会怎么做吗？

非常感谢！

    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;
                    });
                },);
        },

解决方法

澄清一下——您已经有了下载网址 - 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"
        });
    }
  },