React Native Expo：Base64 图像未使用任何上传方法上传到 Firebase 存储答案

【问题标题】：React Native Expo: Base64 Image not uploading to Firebase Storage using any upload methodReact Native Expo：Base64 图像未使用任何上传方法上传到 Firebase 存储
【发布时间】：2022-08-02 20:27:29
【问题描述】：

我正在尝试使用 React Native Expo 将 base64 图像上传到 Firebase 存储。我上传的图像是通过 expo-camera 库中的 takePictureAsync 方法拍摄的，带有以下 CameraPictureOptions

quality:1

base64:true

exif:false

接下来，我将此图像存储在一个名为 photo 的状态变量中，并使用带有 uri 的 Image 标签将其显示给应用程序中的用户：

data:image/jpg;base64\" + photo.base64

现在上传它时，我首先尝试了根据firebase存储documentation的uploadString方法，如下所示

uploadString(storageRef, photo.base64, \'base64\').then((snapshot) => {
  console.log(\'Uploaded a raw string!\');
});

但它给出了错误信息

未处理的承诺拒绝：FirebaseError: Firebase Storage: String does not match format \'base64\': Invalid character found (storage/invalid-format)

我用其他参数而不是base64（\“data_url\”，\“base64url\”，并且没有在参数中放入任何东西）尝试了这个，但对于\“data_url\”和\“base64url\”，我得到了基本相同的错误，当我没有在参数中添加任何内容时，应用程序崩溃。在此之后，我在网上查找了修复方法，有人提出来解释此错误消息的一个问题是，解码和编码 base64 字符串 firebase 存储分别使用了 atob 和 btoa 方法，但这在 javascript 中不起作用/已弃用。为此，建议的修复是将其添加到 App.js 之上

import {decode, encode} from \'base-64\'; 
if (!global.btoa) { 
   global.btoa = encode; 
} 
if (!global.atob) 
{ 
   global.atob = decode;
}

但是，当我这样做时，应用程序在按下触发uploadString 方法的按钮后崩溃。

在此之后，我尝试按照文档使用 uploadBytes 方法。我首先尝试将 uri 字符串 (\"data:image/jpg;base64, base64 data) 作为输入传递，如下所示。虽然这确实使图像在我的 firebase 存储中可见，但无法打开图像。我认为这是因为这个方法需要一个文件或一个 Blob 作为输入，而我给出的输入是一个 base64 字符串

uploadBytes(storageRef, uri).then((snapshot) => {
  console.log(\'Uploaded a blob or file!\');
});

接下来，我在网上寻找将 base64 字符串转换为 Blob 的方法。我尝试的第一种方法是调用 uri 上的 fetch api 和 blob 函数来获取 blob，然后将其放入 uploadBytes 函数中。

const response = await fetch(uri)
const blob = await response.blob() 
uploadBytes(storageRef, blob).then((snapshot) => {
  console.log(\'Uploaded a blob or file!\');
});

但是，我收到以下错误消息，我无法解决。错误：ENOENT：没有这样的文件或目录，打开 pathToReactNativeApp/http:/LocalIPAddress:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false\'

接下来，我按照here 的建议尝试了以下操作来获取 blob，但这会导致应用程序崩溃。

const blob = await new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
             xhr.onload = function () {
             resolve(xhr.response);
          };
             xhr.onerror = function (e) {
             console.log(e);
             reject(new TypeError(\"Network request failed\"));
          };
          // on complete
          xhr.responseType = \"blob\";
          xhr.open(\"GET\", uri, true);
          xhr.send(null);
     });

有人可以指导我如何将此base64图像上传到firebase存储吗？任何帮助将不胜感激！

标签： firebase react-native expo firebase-storage

【解决方案1】：

来自expo的ImagePicker.launchImageLibraryAsync，将返回uri，（不需要包括base64：true）

使用该 uri 生成 blob

常量响应 = 等待 fetch(result.uri);

const blob = 等待 response.blob();

使用这个blob，使用uploadBytes函数上传到firebase存储

上传字节（参考，blob）.....

我正在使用 firebase 9 web moduler，将在所有平台上运行

上传 blob 比使用 base64 好得多，而且速度也很快。

不仅是图片，您还可以上传视频，

【讨论】：