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

Question

我正在尝试使用 React Native Expo 将 Base64 图像上传到 Firebase Storage。我上传的图像是通过 expo-camera 库中的 takePictureAsync 方法使用以下 CameraPictureOptions

拍摄的

quality:1

base64:true

exif:false 

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

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

现在上传时，我首先根据 firebase 存储文档尝试了 uploadString 方法，如下

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

但它给出了错误消息

未处理的承诺拒绝：FirebaseError：Firebase存储：字符串与格式“base64”不匹配：找到无效字符（存储/无效格式）

我尝试使用其他参数而不是base64（“data_url”，“base64url”，并且没有在参数中放入任何内容），但是对于“data_url”和“base64url”，我得到了基本上相同的错误，并且当我不这样做时在参数中放入任何内容都会导致应用程序崩溃。之后我在网上寻找修复方法，有些人提出来解释此错误消息的一个问题是，对 firebase 存储的 base64 字符串进行解码和编码分别使用 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 存储上可见，但无法打开图像。我认为这是因为此方法需要一个 File 或 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的建议获取斑点，但这会导致应用程序崩溃。

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 存储吗？任何帮助将不胜感激！

Answer 1

    xhr.onerror = reject;
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        resolve(xhr.response);
      }
    };
    xhr.open("GET", signature);
    xhr.responseType = "blob";
    xhr.send();

试试这个。一直遇到同样的问题，但这有帮助。 解决方案已发布于此处。

Answer 2

来自expo的ImagePicker.launchImageLibraryAsync，将返回uri，（无需包含base64：true）

使用该 uri 生成 blob

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

const blob =等待response.blob();

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

uploadBytes(ref, blob).....

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

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

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