在firestore中发布时如何附加图像

Posted 2023-02-22

【中文标题】在firestore中发布时如何附加图像

【英文标题】：How to attach an image when posting in firestore

【发布时间】：2021-08-19 17:12:02

【问题描述】：

我使用 Vue3 和 Firestore。

我创建了一个动态页面，它使用自动生成的 id 和 add() 作为 url。

我想让我在写作时可以附上图片。

我可以使用存储来允许用户将图像附加到自动生成的字段吗？

这是我的火库

这是我的 add() 代码

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

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

【问题讨论】：

"插入附加图像的代码" => 你能分享这个代码吗？我们需要知道您如何“附加图片”才能为您提供帮助。

上传图片到云存储，保存URI到Firestore youtube.com/watch?v=lFPmgtD4lJg

@RenaudTarnec 我想让用户在发布时可以在字段的“内容”中附加图像。我需要编写一个将图像附加到 saveform add() 的代码，但我不知道如何。我可以使用自动生成的 id url 将存储连接到页面上的“内容”吗？

【参考方案1】：

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

但是Firebase Storage 的存在是有原因的。它用于文件，Firestore 用于数据。有了存储空间，您可以更稳定地上传/下载。

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

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

这里的最佳做法是（如 cmets 中所述）：将图像上传到 Firebase 存储并将path 或downloadURL 保存到其中。