无法将 react-native-camera TakePictureResponse 上传到 Firebase 存储答案

【问题标题】：Cannot upload react-native-camera TakePictureResponse to Firebase Storage无法将 react-native-camera TakePictureResponse 上传到 Firebase 存储
【发布时间】：2020-08-31 12:49:50
【问题描述】：

我正在尝试使用 react-native-camera 拍摄照片，然后将该照片上传到 Firebase 存储。我可以使用 RNFetchBlob 将文件作为 blob 检索，但是当尝试将 .put() 放入 Firebase 存储时，我得到一个

Firebase 存储：索引 0 处的 put 中的参数无效：预期的 Blob 或文件。

我还尝试使用 .putString() 并将其作为 base64 字符串或只是 uri 传递，但是我遇到了类似的问题。这是一些相关的代码。

export function createPhoto(photo: TakePictureResponse): Boolean {
  var ref = storage.ref();
  var photoRef = ref.child('photos');
  if (Platform.OS === 'ios') {
    var filePath = photo.uri.replace('file:', '');
  } else {
    filePath = photo.uri.split('raw%3A')[1].replace(/\%2F/gm, '/');
  }
  RNFetchBlob.fs.readFile(filePath, 'base64').then((data) => {
    photoRef.put(data).then((snapshot) => {
      console.log('Uploaded a photo');
      console.log(snapshot.downloadURL);
    });
  });

更新：RNFetchBlob.fs.readFile() 根据您选择的解码器选项返回一个字符串（对于本示例，它是 base64）。但是我仍然有问题，因为 Firebase 存储将不接受带有 .putString(data, 'base64') 的 base64 字符串。我收到"Firebase Storage: String does not match format 'base64': Invalid character found" 错误。

【问题讨论】：

您当前的代码传入一个字符串，put 不接受该字符串。虽然调用 putString 也可能不起作用，但错误消息可能会有所不同，putString 是调用其余代码的正确消息。
所以我从您的回复中了解到，RNFetchBlob.fs.readFile() 返回一个存储在“数据”中的字符串。我的印象是它从作为参数给出的文件路径中返回了一个 blob。所以这个字符串只是图片的base64表示？
您可能需要阅读文档以了解它返回的内容。也许这就是你正在使用的？ github.com/joltup/rn-fetch-blob/wiki/…
@Doug Stevenson 我阅读了文档，我收集到的只是它返回了一个承诺，如果使用 .then 运算符，我会收到除此之外没有更多信息的“数据”。除非我弄错了，误读了。
您已经告诉 API 您需要 base64 数据，这是一个字符串。编码参数的说明是：“解码文件数据的解码器，应该是base64、ascii、utf8之一，默认使用utf8。”。这些都将是字符串。

标签： typescript firebase react-native firebase-storage

【解决方案1】：

由于我使用的是 React Native，我遇到问题的原因已在此处的另一篇文章中得到解答。 https://stackoverflow.com/a/52174058/7842007

这基本上与 react native 无法处理 firebase 存储使用的 atob 和 btoa 有关，因此您必须使用诸如“encode-64”之类的库在 index.js 中进行设置' 或通过创建自己的库。

【讨论】：