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

Posted 2023-02-22

【中文标题】如何从 Firebase 存储中获取调整大小的图片下载 URL

【英文标题】：How to get resized image downloadedURL from Firebase Storage

【发布时间】：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 文档。

【参考方案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"
        );
    
  ,