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

Posted 2023-03-22

【中文标题】无法将 react-native-camera TakePictureResponse 上传到 Firebase 存储

【英文标题】：Cannot upload react-native-camera TakePictureResponse to Firebase Storage

【发布时间】：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。”。这些都将是字符串。

【参考方案1】：

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

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