Firebase 如何通过firestore中的add（）将图像上载到自动生成的文档

我正在创建一个动态页面板

此页面上的url是通过firestore add（）创建的

我想允许用户在这个公告板上创建帖子时上传图片

有没有办法将图像放入firestore字段

如果没有，我是否应该让他们将图像上传到存储器？ 如果是，我可以从通过add（）创建的页面加载图像吗

---

因为您没有指定目标语言，所以我假设您使用的是JavaScript Web SDK。在每个SDK中，

add（data）

是

doc（）.set（data）

的语法糖。因此，要生成可在文件上载中使用的表单ID，我们可以使用：

const formRef=firebase.firestore（）.collection（“forms”）.doc（）；

最后，在数据库中存储图像时，有两种选择

不推荐：将资源嵌入云Firestore文档中 在文档中存储二进制文件的最简单方法之一是使用二进制文件。这些URL获取二进制数据，将其编码为Base64，添加一些有关存储数据的元数据，然后生成如下所示的字符串：

//单个#FFFFFF像素的PNG图像的数据URL
“数据：image/png；base64，IVBORW0KGGOAAAANSUHEUGAAAAAAACQD1PEAAAAAAAAAAXnsr0IARS4C6QAAAQUANQU1BAACXJWV8YQUAAAAJCEHZCWAAADSMAA7DACDVGQAAAMSURBVBHXY/j//z8ABf4C/QC1GYQAAAASUV5CYII=”

然后，这些数据URL可以存储在文档（例如

/forms/{formId}

）或其子集合（例如

/forms/{formId}/attachments/{attachmentId}

）中。通过这种方式存储图像，由于Base64编码，文件大小会膨胀大约25%或更多

使用此方法，您可以使用控制对图像的访问，但还需要实现从数据库获取图像并将其插入网页的逻辑

要将添加到表单中的图像转换为数据URL，请参阅文档以获取详细信息。您还可以将web画布转换为数据URL，如下所示

函数readFileAsDataURL（文件）{ 返回新承诺（（解决、拒绝）=>{ const reader=new FileReader（）； addEventListener（“加载”，函数（）{resolve（this.result）}，false）； addEventListener（“error”，函数（）{resolve（this.error）}，false）； reader.readAsDataURL（文件）； }); } 子表单上的异步函数（e）{ const user=firebase.auth（）.currentUser； 如果（！用户）{ setErrorMessage（“您必须登录！”）； 返回false； } const uid=user.uid； const files=document.querySelector（'input[type=file]'）。files； const dataURLs=文件 ？等待承诺.all（[].map.call（文件，readFileAsDataURL）） : []; //准备数据库资料 const db=firebase.firestore（）； const batch=db.batch（）； //创建表单引用 const formRef=db.collection（“forms”）.doc（）； //组装并排队上载每个附件 const attachmentsColRef=formRef.collection（“附件”）； const attachmentIds=dataURLs.map（（url，i）=>{ 常量文件=文件[i]； const attachmentRef=attachmentsColRef.doc（）； 常量附件数据={ id:attachmentRef.id，//可选 lastModified:firebase.firestore.Timestamp.fromMillis（file.lastModified）， name:file.name， src:url， 类型：file.type } batch.set（attachmentRef、attachmentData）； 返回attachmentRef.id； } //汇编表单数据 常量formData={ 附件：附件， 内容：“这是我的第一篇帖子”， createdAt:firebase.firestore.FieldValue.serverTimestamp（）， id:formRef.id，//可选 姓名：“约翰”， 标题：“你好，世界！我是约翰”， uid， updatedAt:firebase.firestore.FieldValue.serverTimestamp（）， 浏览次数：0 } //表单数据的队列上载 批量设置（formRef、formData）； //上传 返回batch.commit（） .然后（（）=>{ log（`Successfully created Form#${formRef.id}！`）； 返回true； }) .catch（（错误）=>{ setErrorMessage（“未能提交表单数据！”）； 错误（`未能创建表单#${formRef.id}！`，错误）； 返回false； }); } 建议：将文件存储在云存储（或其他合适的二进制数据存储）中 本部分将重点介绍Google云存储，但也可应用于其他基于应用程序的文件存储服务（如Amazon Elastic文件系统、Amazon S3 Bucket、DigitalOcean Spaces等）和以消费者为中心的文件存储服务（如Google Drive、OneDrive、Dropbox、WetTransfer等）

与CloudFireStore类似，您可以在这个“二进制对象数据库”中存储图像但是，与Cloud Firestore不同的是，这种存储方法针对以多种不同形式存储二进制数据进行了优化，并提供了许多针对文件处理的重点功能，如限制上载文件、恢复上载、缓存浏览器信息、保留策略（例如，删除所有超过1年的文件）和文件版本控制（如果您想使用它）

存储在云存储中的文件可以通过云存储和Firebase SDK访问，也可以通过URL访问（如果文件是私有文件，则在访问URL时需要提供访问令牌）

这些URL通常采用以下形式：

//谷歌云存储中的公共文件
"https://storage.googleapis.com/BUCKET_NAME/OBJECT_NAME"
//Firebase云存储中带有访问令牌的私有文件
"https://firebasestorage.googleapis.com/v0/b/PROJECT_ID.appspot.com/o/OBJECT_NAME.png?alt=media&token=ACCESS_TOKEN"

SubmitForm（e）上的异步函数{ const user=firebase.auth（）.currentUser； 如果（！用户）{ setErrorMessage（“您必须登录！”）； 返回false； } const uid=user.uid； const files=document.querySelector（'input[type=file]'）。files； //准备数据库资料 const db=firebase.firestore（）； const batch=db。