Question

我尝试通过heroku跟踪和修改本指南，从我的反应原生应用上传图像到了S3：https://devcenter.heroku.com/articles/s3-upload-node

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

一切运行良好，然后我尝试将XMLHttpRequests转换为fetch请求，这似乎是本机反应的优势。转换后，文件仍然被上传到S3，但是当我点击图片链接时，图像将无法正常显示，而是显示空方块：

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

自：

_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是一个更简单的选项。根据{{3}}，这也是Facebook所做的（评论超过一年）。

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

在React Native中使用Fetch而不是XMLHttpRequest

1 个答案: