使用 React Native Fetch API 在 Android 上获取选取的图像答案

【问题标题】：Get picked image on Android with React Native Fetch API使用 React Native Fetch API 在 Android 上获取选取的图像
【发布时间】：2019-05-02 17:44:16
【问题描述】：

我正在使用 React Native 和 Expo。我正在使用 Expo 图像选择器，它将本地 URI 返回到图像文件。返回的 URI 如下所示： file:///data/user/0/com.myapp/cache/ExperienceData/%2540myapp%252Fmyapp/ImagePicker/c5a29113-7c8f-4224-99ec-007f641841ee.jpg

在 iOS 上，我可以使用 React Native Fetch API 获取 blob，因此我可以使用 Amplify Storage Service 将其上传到 S3。一切正常。

但是，在 Android 上，它不起作用。 fetch 命令返回1 而不是响应；没有错误。

我不能使用（好吧，不想使用）rn-fetch-blob，因为我的应用程序已分离，需要修补 rn-fetch-blob 才能与 Expo 32 一起使用。

有趣的是……如果我不使用图像调整器的 URI，而是使用来自网络的图像 URL，它可以在 Android 和 iOS 上运行。那么，如何在 Android 上使用 fetch 从 Android 图像选择器中返回本地文件的内容？

【问题讨论】：

标签： react-native fetch expo

【解决方案1】：

在寻找解决此问题的方法时，我遇到了this post。解释很透彻。这是 TL;DR 。 . .

从 RN 0.57 开始，他们用于 fetch 的 polyfill 不再默认 xhr.responseType 为 blob。 React Native for Android BlobModule 检查响应类型以确定它是否可以处理不是 http 或 https 请求的 URL。因为 responseType 从来不是'blob'，所以这个模块从不处理请求，并且抛出一个类型错误。 . .在安卓上。 . .对于文件请求。 . .通过whatwg-fetch.js polyfill。 . . RN 0.57+。

基于上述关于世博会问题的帖子，我将其添加为（希望是）临时解决方案。

requestBlob = (uri) => {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new TypeError('Network request failed'));
    xhr.responseType = 'blob';

    xhr.open('GET', uri, true);
    xhr.send(null);
  });
}

我正在像这样保存我的图像：

  let body, storedImage;
  try {
    body = await requestBlob(localImageUri).catch(error => errors.push(error));
    storedImage = await Storage.put(path, body).catch(error => errors.push(error));
  } finally {
    body.close();
  }

【讨论】：