在 React Native 中使用 Fetch 代替 XMLHttpRequest

Question

我试图通过遵循和改编 heroku 的本指南，从我的 react 本机应用程序将图像上传到 S3：https://devcenter.heroku.com/articles/s3-upload-node

基本上我在我的 express.js 后端使用 aws-sdk 来生成预签名请求，以便从 react native 将图像上传到 S3。

一切正常，所以我尝试将 XMLHttpRequests 转换为 fetch 请求，这似乎受到 react native 的青睐。转换后，文件仍在上传到 S3，但是当我点击图片链接时，图片无法正常显示，而是显示一个空方块：

Empty square shown instead of image

更具体地说，似乎是这段代码转换导致了它发生：

发件人：

_uploadFile(file, signedRequest, url){
  const xhr = new XMLHttpRequest();
  xhr.open('PUT', signedRequest);
  xhr.onreadystatechange = () => {
    if(xhr.readyState === 4){
      if(xhr.status === 200){
        console.log("UPLOAD DONE");
      } else {
        alert('ERROR UPLOADING');
      }
    }
  };
  xhr.send(file);
}

收件人：

_uploadFile(file, signedRequest, url) {
  let option = {
    method: "PUT",
    headers: {
      "Content-Type": "image/jpeg",
    },
    body: JSON.stringify(file)
  }

  fetch(signedRequest, option)
    .then(res => console.log("UPLOAD DONE"))
    .catch(err => console.log("ERROR UPLOADING: ", err))
}

正在上传的文件对象：

  {
    name: "profileImage",
    type: "image/jpeg",
    uri: 'data:image/jpeg;base64,' + response.data, //just a base64 image string
    isStatic: true
  }

有人能解释一下为什么会发生这种情况，或者有过类似的经历吗？非常感谢！

Answer 1

在您的 fetch 示例中，您将 JSON 字符串放入您的正文中。它将被发送到 S3，但不会被解释为图像上传。您应该能够自己构造一个 FormData 对象并将其作为请求正文传递给 fetch，但我认为使用 XHR 是更简单的选择。根据this comment 的说法，Facebook 也是这样做的（该评论已有一年多的历史了）。

如果可能，您还应该尝试使用本地 URI，而不是传递 Base64 编码的数据。在 JS 和 native 之间传输几 MB 的图像数据需要相当长的时间。