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

Question

我有一个 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 存储的示例。

任何帮助是极大的赞赏。

Answer 1

我能够让它工作，尽管一些具有本机行为的 firebase / fetch 仍然不清楚。

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

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

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

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

1. 我不得不在全局命名空间中添加一个 btoa() 函数。
2. 使用以下代码下载，然后将其作为 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() 并尝试了包括 libs 在内的所有方法将 Blob 转换为 Base64 字符串，但遇到了一个或另一个问题，我也尝试使用 Expo FileSystem，在本地下载文件并使用读取FileSystem.readAsStringAsync，但它遇到了 iOS 的本机问题。tl;dr；上述解决方案有效，但如果有人可以对所有其他尝试或更好的解决方案提供任何解释或清晰度，那么将不胜感激。同样不清楚为什么 firebase存储 putString(data, 'base64') 不起作用。)