浏览器取消了通过 JS Fetch API 将图片上传到 Imgur API

Question

我写 a small application on Codepen 使用 Javascript 的 Fetch API 上传到特定的 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 模式的请求。

关于我在这里做错了什么的任何指导？

Answer 1

对于 FormData，您实际上不需要 Content-Type header。当 body 中有 FormData 类型时，浏览器会自动为您添加它。我认为那是因为 header 需要一些额外的信息（当浏览器自动处理它时，它在我的机器上看起来像 multipart/form-data; boundary=----WebKitFormBoundaryvAmR7mCXOyHiPIH5）。

这是更新后的笔，看起来可以正常使用： https://codepen.io/ccnokes/pen/wyBYOd

此外，因为您是通过 <form> 提交数据但通过 fetch 处理请求，您需要告诉 <form> 不要进行整页导航更改到 POST 表单（取消获取）。所以我在该表单的 submit 处理程序中添加了 event.preventDefault() 。

浏览器取消了通过 JS Fetch API 将图片上传到 Imgur API

Image upload to Imgur API via JS Fetch API is canceled by browser

javascript

fetch

imgur