Отправка двоичного файла через HTTP с помощью React-Native Fetch API

Question

Есть ли способ использовать API Fetch для загрузки двоичного файла (например, в S3 с использованием подписанного URL-адреса)?

Это было бы простым PUT для некоторого "application/octet-stream".

Библиотека XHR работает, но я считаю, что Fetch лучше, особенно в среде React-Native. Поддерживает ли React-Native Fetch Blob в настоящее время?

В идеале я хотел бы сделать что-то подобное, но Blob не определено:

fetch('https://s3.amazonaws.com/signedUrl/', { method: 'PUT', headers: { 'Content-Type': 'application/octet-stream', }, body: Blob(filePath) })

Answer 1

Это работает на Android/iOS и симуляторах, если у вас есть путь файловой системы к вашему двоичному файлу, например, изображение с использованием встроенного XMLHttpRequest для отправки запросов:

const xhr = new XMLHttpRequest();
xhr.open('post', serviceUrl);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      resolve(xhr.response);
    } else {
      reject(xhr.response);
    }
  }
};

xhr.setRequestHeader('Content-Type', 'image/jpeg');

xhr.send({ uri: 'pathToFile', type: 'image/jpeg', name: 'file' });

Пример pathToFile в macOS: file:///Users/username/Library/Developer/CoreSimulator/Devices/061D4A47-6363-4996-A157-03E6AD2DD9E4/data/Containers/Data/Application/3900F3EF-3259-43CF-9400-87B638EF9A1B/Library/Caches/Camera/F86E7345-080A-4D51-A80E-0CAD3370A353.jpg

Answer 2

Я бы порекомендовал использовать: https://github.com/github/fetch качестве полизаполнения для Fetch, так как не поддерживается широко.

Получить образец документации:

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

Я использую это следующим образом:

var input = document.querySelector('input[type="file"]')

function upload(e) {
  const file = input.files[0];
  const reader = new FileReader();

  reader.onload = (e) => { 
    fetch('/avatars', {
      method: 'POST',
      body: e.currentTarget.result
    })
  };

  reader.readAsArrayBuffer(file);
}

input.addEventListener('change', upload, false)