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

Question

我正在尝试使用React Native Expo上传Base64图像到Firebase存储。我上传的图像通过

quality:1

base64:true

exif:false 

接下来，我将此图像存储在状态下可变，命名照片，并使用带有URI的映像标签在应用中显示给用户：

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

现在，当上传它时，我首先根据firebase存储文档如下

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

doc/storage/web/upload-files“ rel

com / 拒绝：firebaseError：firebase存储：字符串不匹配格式'base64'：找到无效的字符（storage/novelid-format），

我尝试使用其他参数而不是base64（“ data_url”，“ base64url”，并且不在参数），但是我对“ data_url”和“ base64url”的错误基本相同，当我不将任何内容放在应用程序中时崩溃。此后，我在网上查找以找到修复程序，还有一个人提出的解释此错误消息的问题是，分别使用ATOB和BTOA方法来解码和编码Base64字符串Firebase Storage，但这在JavaScript中不起作用/被弃用。为此，建议的修复程序将其添加到app.js的顶部，

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

但是，当我按下按钮后，应用程序崩溃了，以触发上传串方法。

之后，我尝试根据文档使用上传by方法。我首先尝试传递URI字符串（“数据：image/jpg; base64，base64 data）作为输入，如下所示。虽然这确实使图像在我的firebase存储中可见，但无法打开图像。我认为这是因为这是因为此方法期望一个文件或一个斑点作为输入，我给出的输入是基本64字符串

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

，我在线寻找将基本64字符串转换为blob的方法。 URI和BLOB函数获取BLOB，然后将其放入上传Bytbytes函数中

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

。 Error: ENOENT: no such file or directory, open pathToReactNativeApp/http:/LocalIPAddress:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false'

Next,我尝试了以下内容以获取斑点，如所建议的在这里，但是这会导致应用程序崩溃。

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

Const响应=等待fetch（result.uri）;

const blob =等待响应.blob（）;

使用此BLOB，使用上传Bybytes函数上载

Bobtes（Ref，Blob）.....

IM使用Firebase 9 Web Moduler，将在所有平台上

运行的blob远比使用Base64和快速的Aswell在所有平台上运行。

不仅图像，您还可以上传视频。