Question

有没有办法使用Fetch API上传二进制文件（例如使用签名的URL上传到S3）？

对于某些应用程序/八位字节流来说，这将是一个简单的PUT。

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

如果您具有二进制文件的文件系统路径，例如使用内置XMLHttpRequest来发送请求的图像，则此方法可在Android / iOS和模拟器上使用：

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' });

macOS上的示例 pathToFile 是 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的polyfill，因为不受广泛支持。

获取文档示例：

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)

使用React-Native Fetch API通过HTTP发送二进制文件

2 个答案: