在 Firebase 存储中存储和检索 base64 编码的字符串答案

【问题标题】：Storing and retrieving a base64 encoded string in Firebase storage在 Firebase 存储中存储和检索 base64 编码的字符串
【发布时间】：2020-10-10 05:02:39
【问题描述】：

我有一个 Base64 编码的字符串（这是 AES 加密的字符串）。我正在尝试将其存储在 Firebase Storage 中，然后从中下载。

我尝试了多种选择，例如

pathReference.putString(data, 'base64')

这不会在存储中保留 base64 字符串，而是将其转换为整数。我也尝试过提供 {contentType: "application/Base64"} 但 putString 似乎不起作用。

然后我试着把它变成一个 blob

blob = new Blob([data], {type: "application/Base64"})
await pathReference.put(blob)

有了这个，我可以在存储中获取 base64 编码的字符串（尽管在字符串中添加了换行符）

当我使用 ES6 fetch 下载它时，我没有取回字符串

const url = await pathReference.getDownloadURL()
const response = await fetch(url)
const data = await response.blob()

反而得到一个错误未处理的承诺拒绝：URIError：URI错误

我只是在寻找一个非常简单的将base64编码字符串上传和下载到firebase存储的示例。

非常感谢任何帮助。

【问题讨论】：

为什么要将该字符串保存到存储而不是 Firestore 或数据库？
我可以，但用例是定期加密备份，当用户想要恢复一些本地设备数据时可以偶尔使用。这不是我已经在使用 firestore 的实时应用数据。

标签： javascript base64 fetch expo firebase-storage

【解决方案1】：

我能够让它工作，尽管一些具有反应原生行为的 firebase / fetch 仍不清楚。

要将 base64 编码的字符串上传到 firebase 存储，我使用了以下 sn-p。
这里的“data”已经是一个Base64编码的字符串了。

const pathReference = storage.ref(myFirebaseStorageLocation)
const blob = new Blob([data], {type: "application/Base64"})
await pathReference.put(blob)

我验证了 Firebase 存储中的内容并手动下载了文件，看起来也不错。

然后在 React Native 下下载，Expo 项目有几个障碍，但最终奏效的是这个

我不得不在全局命名空间中添加一个 btoa() 函数。
使用以下代码下载，然后将其作为 Base64 字符串读回（这令人惊讶地难以获取）

下载文件并作为 Base64 字符串回读的代码。

const fetchAsBlob = url => fetch(url)
  .then(response => response.blob());

const convertBlobToBase64 = blob => new Promise((resolve, reject) => {
  const reader = new FileReader;
  reader.onerror = reject;
  reader.onload = () => {
    resolve(reader.result);
  };
  reader.readAsDataURL(blob);
});


const url = await pathReference.getDownloadURL()
const blob = await fetchAsBlob(url)
const doubleBase64EncodedFile = await convertBlobToBase64(blob)
const doubleEncodedBase64String = doubleBase64EncodedFile.split(',')[1]
const myBase64 = Base64.atob(doubleEncodedBase64String)

需要注意的是，FileReader 读取内容并将其再次编码为 Base64（因此存在双重编码）。我不得不使用 Base64.atob() 来取回我原来的 Base64 编码字符串。

同样，这可能是在 React Native Expo 项目下调用 fetch 的情况所特有的，这两种情况在处理 blob 或 Base64 时都有一些额外的怪癖。

（PS：我尝试使用 response.blob()、response.buffer() 并尝试了所有方法，包括将 Blob 转换为 Base64 字符串的库，但遇到了一个或另一个问题，我也尝试使用 Expo FileSystem，在本地下载文件并使用 FileSystem.readAsStringAsync 阅读，但它遇到了 iOS 的原生问题。tl;博士；上述解决方案有效，但如果有人可以对所有其他尝试或更好的解决方案提供任何解释或说明，那么将不胜感激。同样不清楚的是为什么 firebase 存储 putString(data, 'base64') 不起作用。）

【讨论】：