在 firestore 中发帖时如何附加图片

Question

我使用 Vue3 和 Firestore。

我创建了一个使用 auto-generated id 和 add() 作为 url 的动态页面。

我想在写的时候附上一张图片。

我可以使用存储允许用户将图像附加到 auto-generated 字段吗？

这是我的Firestore

这是我的 add() 代码

const saveform = async () => {
  await db.collection('reviews').add(
    {
      title: title.value, content: content.value, createdAt, updatedAt, uid, name, views, likeCount, dislikeCount, likeuid
    }
  )
}

我可以将附加图像的代码插入 add() 代码并将其保存在存储中吗？

Answer 1

您可以将图像转换为 bas64，然后将其写入 firestore。

但是 Firebase Storage 存在是有原因的。它是为文件制作的，Firestore 是为数据制作的。有了存储，你就有了更稳定的 upload/download.

您还应该考虑的是，它会增加您的 Firestore 数据库的大小，并且每个 document 有 1 MB 的限制。如果您有任何大于该尺寸的图像，您将无法上传。由于附加数据，每个图像都需要更小。

相信我，我在我的一个 Web 应用程序中尝试了同样的方法来利用 Firestore 的 offline 功能。不能推荐给任何人。您还需要将每个图像从 bas64 转换回您需要的格式。也无法将图片分享给无法访问您的 firestore 的人，因为您没有任何图片可分享。

此处的最佳做法是（如评论中所述）：将图像上传到 Firebase 存储并保存 path 或 downloadURL.

在 firestore 中发帖时如何附加图片

How to attach an image when posting in firestore

firebase

vue.js

firebase-storage

google-cloud-firestore