Получить выбранное изображение на Android с React Native Fetch API - PullRequest
Новая
       35

Получить выбранное изображение на Android с React Native Fetch API

0 голосов
/ 02 мая 2019

Я использую 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-объект, чтобы я мог загрузить его на S3 с помощью AmplifyСлужба хранения .Все отлично работает.

На Android, однако, не работает.Команда fetch возвращает 1, а не ответ;ошибок нет.

Я не могу использовать (ну, не хочу использовать) rn-fetch-blob, потому что мое приложение отсоединено, а для работы с rn-fetch-blob необходимо установить исправленияExpo 32.

Забавно, но ... если вместо использования URI для изменения размера изображения я использую URL-адрес изображения из сети, он работает как на Android, так и на iOS.Итак, как мне использовать fetch на Android, чтобы вернуть содержимое локального файла из средства выбора изображений Android?

1 Ответ

0 голосов
/ 02 мая 2019

В поисках решения этой проблемы я наткнулся на этот пост . Объяснение довольно тщательное. Вот TL; DR. , .

Начиная с 0,57 RN, для полифилла, который они используют для выборки, значение xhr.responseType по умолчанию больше не равно blob. React Native для Android BlobModule проверяет тип ответа, чтобы определить, может ли он обрабатывать URL-адрес, если это не запрос http или https. Поскольку responseType никогда не равен 'blob', этот модуль никогда не обрабатывает запрос, и выдается ошибка типа. , , на андроид. , , для файловых запросов. , , через полифилл whatwg-fetch.js . , , для 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();
  }
...