通过 XMLHttpRequest 创建 Blob 的 React Native 错误答案

【问题标题】：React Native Error Creating Blobs via XMLHttpRequest通过 XMLHttpRequest 创建 Blob 的 React Native 错误
【发布时间】：2019-11-22 21:29:37
【问题描述】：

我正在开发一个 React-Native 应用程序，其中照片和文档是所需的主要功能之一。用户不断在他们的设备上拍照，我们使用本地 uri 制作一个 blob，该 blob 通过他们的 aws-sdk 上传到 AWS S3。

我们用来将本地 uri 转换为 blob 的函数如下：

// https://github.com/expo/expo/issues/2402 - comment by "sjchmiela"
const convertUriToBlob = uri => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onerror = err => {
      reject(err);
    };
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        resolve(xhr.response || xhr._response);
      }
    };
    xhr.open('GET', uri);
    xhr.responseType = 'blob'; // convert type
    xhr.send();
  });
};

在某些本地 uri 上使用此功能时，我们有时会收到导致设备崩溃的错误：

我正在寻找有关此 blob 错误的更多信息或处理从设备上传大量照片/文档的更好替代方法。

RN 版本是“react-native”：“0.57.4”

编辑：Similar problem

【问题讨论】：

标签： javascript image react-native blob

【解决方案1】：

我无法弄清楚为什么我在使用 XMLHttpRequest 生成 Blob 时收到错误消息，而不是当 RN 尝试通过网桥发送 Blob 数据时出现问题。

我尝试在 rn-fetch-blob pkg 中使用 Blob polyfill，这阻止了上述错误，但是 AWS SDK 遇到了 polyfill 问题并上传了损坏的数据。

我现在只是直接使用rn-fetch-blob pkg 将文件从设备读取到 base64 编码字符串并将其转储到 Uint8Array

【讨论】：

【解决方案2】：

提到将文件读入 base64 的答案有助于避免默认的 react-native Blob polyfill 崩溃，但仍然不建议将其用于生产应用程序！仍然有许多与上传照片/文档相关的崩溃，并且由于将 base64 字符串传输回桥上，该应用程序在上传时受到了巨大的性能影响。

公认的答案是使用 rn-fetch-blob 及其 RNFetchBlob.fetch('PUT|POST', url, headers, LOCAL_PATH_TO_FILE) 并继续将照片/文档上传到本机端

【讨论】：