Javascript 浏览器已取消通过JS Fetch API将图像上载到Imgur API

我写这篇文章是为了使用Javascript的FetchAPI上传到特定的Imgur相册。应用程序无法上传，我不知道为什么，因为我没有收到服务器的响应。浏览器似乎正在取消请求，而不是将其发送出去

这是我的密码：

const form = document.querySelector('form');
form.addEventListener('submit', event => {
  const fileInput = event.target.querySelector('input');
  const imageFile = fileInput.files[0];

  const formData = new FormData();
  formData.append('image', imageFile);
  formData.append('album', 'EVGILvAjGfArJFI');

  fetch('https://api.imgur.com/3/image', {
    method: 'POST',
    headers: new Headers({
      'Content-Type': 'multipart/form-data',
      Authorization: 'Client-ID 90ef1830bd083ba',
    }),
    body: formData
  }).then(response => {
    if (response.ok) {
      alert('Image uploaded to album');       
    }
  }).catch(error => {
    console.error(JSON.stringify(error));
    alert('Upload failed: ' + error);
  });
});

我不确定是否需要读取文件，或者是否可以将文件对象直接传递到表单数据中。我在网上看到了这两种方法的例子，我尝试了这两种方法，结果都是一样的。我注意到开发工具似乎没有在请求主体中显示图像数据。不确定这是否意味着它没有被发送，或者Chrome只是没有显示它，因为它无论如何都不是人类可读的。我在CORS模式打开和关闭的情况下尝试了该请求

---

关于我这里做错了什么有什么指导吗？

对于FormData，实际上不需要内容类型标题。当正文中有FormData类型时，浏览器会自动为您添加该类型。我认为这是因为该标题需要一些额外的信息（当浏览器自动处理它时，它看起来像我的机器上的

多部分/表单数据；boundary=----WebKitFormBoundaryvAmR7mCXOyHiPIH5

）

这是更新后的笔，看起来它正在工作：

---

此外，由于您通过

提交数据，但通过

获取处理请求，因此您需要告诉
不要进行整页导航更改以发布表单（这会取消获取）。因此，我在表单的
submit
处理程序中添加了
event.preventDefault（）
 这确实有效。看起来请求仍然抛出，但请求确实到达Imgur，图像最终出现在相册中。谢谢你的帮助！刚刚又测试了一次，它对我来说不合适。奇怪的好吧，很高兴它有帮助！刚刚注意到您所做的另一个重要更改：
event.preventDefault（）
。我认为事件传播会导致表单提交取消我的获取请求。也许你也想把它加到你的答案上。@raddevon哦，是的，忘了那个。已更新。是否还需要将
init:{credentials:“include”}
选项附加到
fetch
？否则它不会发送cookies。@zero298它似乎不需要cookies。请求所需的唯一身份验证是
授权
头。