React Native base64 图像上传到 Firebase 存储答案

【问题标题】：React Native base64 Image Upload to Firebase StorageReact Native base64 图像上传到 Firebase 存储
【发布时间】：2020-03-23 17:42:42
【问题描述】：

我目前正在开发一个应用程序。我目前的工作流程相当简单。

用户创建一个帐户，然后被带到一个页面以填充他们的个人资料信息。名称、描述和一些图片。

我使用expo的ImagePicker获取图片：

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 0.1,
      allowsEditing: true,
      aspect: [2, 3],
      base64: true
    });

原来我是用这个来上传图片的：

// Why are we using XMLHttpRequest? See:
    // https://github.com/expo/expo/issues/2402#issuecomment-443726662
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(xhr.response);
      };
      xhr.onerror = function(e) {
        reject(new TypeError("Network request failed"));
      };
      xhr.responseType = "blob";
      xhr.open("GET", uri, true);
      xhr.send(null);
    });

    const ref = firebase
      .storage()
      .ref()
      .child(uuid.v4());
    const snapshot = await ref.put(blob);

    // We're done with the blob, close and release it
    blob.close();

    let url = await snapshot.ref.getDownloadURL();

    return url;

这里的问题是我在该函数中循环了大约 6 次，并且一直收到一些模糊不清的错误。

目前，我正在尝试使用以下方式上传图片：

const ref = firebase
      .storage()
      .ref()
      .child(uuid.v4());

    const snapshot = await ref.putString(b64Url, "data_url");

这在网络上运行良好，但在本机应用程序中我收到错误：

FirebaseStorageError {
  "code_": "storage/invalid-format",
  "message_": "Firebase Storage: String does not match format 'base64': Invalid character found",
  "name_": "FirebaseError",
  "serverResponse_": null,
}

The last comment on this issue 概述了问题。分解它：atob 不存在。这是错误背后的唯一问题。为了解决这个问题，我像这样填充它：

import { decode, encode } from "base-64";

if (!global.btoa) {
  global.btoa = encode;
}

if (!global.atob) {
  global.atob = decode;
}

然而，第二个问题是：

Firebase 还尝试使用本机 Blob 类（由 react-native 实现），但 Blob 的 react-native 版本错误地将 Uint8Array 数据转换为字符串，从而破坏了上传。

我尝试了他的deleteing global.Blob 的解决方案，并在上传后恢复它。 ~~Firebase 必须已经依赖于 blob，因为现在它出错了，因为 Blob 不存在。~~ 编辑：Blob 实际上是在 AppEntry.bundle 中的某个地方调用的，上传工作正常。 p>

我希望将我的应用程序保持在受管理的工作流程中，因此我非常不想退出。

我的问题如下：

特别是在 react-native 中是损坏的 Blob 代码：

错误地将 Uint8Array 数据转换为字符串

有没有一种方法可以在避免错误或弹出的同时，一次将 6 张图片上传到 Firebase 存储？如果有，怎么做？

【问题讨论】：

标签： firebase react-native blob expo

【解决方案1】：

我最终遵循的解决方案是：

  async function uploadImageAsync(uri) {
    const ref = firebase
      .storage()
      .ref()
      .child(uuid.v4());

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

    var mimeString = uri
      .split(",")[0]
      .split(":")[1]
      .split(";")[0];

    const snapshot = await ref.put(blob, { contentType: mimeString });

    let url = await snapshot.ref.getDownloadURL();

    return url;
  }

我发现我似乎无法让 firebase 的 putString 函数工作，但我可以使用 XMLHttpRequest 从字符串中创建一个 blob。然后我只是将 blob 上传到 firebase

【讨论】：