Javascript Fetch和&；从浏览器向S3 bucket上传图像时使用Axios

我想知道在执行PUT调用上载图像时，使用获取API和Axios API之间有什么区别

我花了一整天的时间尝试不同的方法来发送我的获取请求的主体（一个图像）以上传到一个S3签名的url，但是上传到S3 bucket的图像一直显示文件有0或2个字节

当比较两个请求之间的头时，我注意到曾经的差异是内容长度头。使用fetch时，内容长度头值为0或2，使用Axios时为477386（取决于文件大小）

  // Fetch
  const response = await api({
    url: signedURL,
    method: 'PUT',
    body: image,
    headers: {
      'Content-Type': image.type,
    },
  })

  // Axios
  const response = await axios.put(signedURL, image, {
    headers: {
      'Content-Type': image.type,
    },
  })

我尝试了几种使用fetch发送正文的不同方法，例如使用FormData对象、使用Blob发送图像，甚至只发送图像文件（如上所示）。 我也试着用邮递员来测试我的上传，它没有问题

在使用fetch时，我是否需要执行某些操作以获得正确的内容长度标题？

您可以在fetch中使用api。您需要创建一个新的FormData对象，并使用

file

参数将其附加到图像文件中，您可以将其作为正文发送

let body = new FormData();
body.append('file', image);
fetch(signedURL, { method: 'PUT', body: body });

---

这回答了你的问题吗？就我个人而言，我优先选择fetch，因为它是用Javascript构建的，而Axios是一种依赖关系，但我使用这两种方法得到了相同的结果……我个人也更喜欢fetch，原因与@assembler相同。但是，在本例中，fetch不起作用。Axios成功了。我不明白为什么。@sbodi我建议您使用postman，您可以使用它来测试您的请求，最有用的是它将为您提供正确的fetch或axios连接。。。试试看。@assembler谢谢！我也试过邮递员，效果不错。只是不明白为什么fetch在浏览器中不起作用。URL似乎希望将PNG作为请求正文，而不是多部分/表单数据编码正文。感谢您的响应，不过我尝试了这一点。我甚至试着用一滴。FormData、Blob，甚至仅仅发送文件本身都不起作用。一旦我切换到Axios，发送和接收的文件没有任何损坏。