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

时间:2018-01-30 02:51:53

标签: javascript fetch imgur

我写了a small application on Codepen以使用Javascript的Fetch API上传到特定的Imgur相册。应用程序无法上传,我不确定为什么因为我实际上没有从服务器获得响应。浏览器似乎正在取消请求而不是将其发送。

Chrome dev tools network tab request canceled

Chrome dev tools request details

这是我的代码:

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);
  });
});

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

关于我在这里做错了什么的指导?

1 个答案:

答案 0 :(得分:2)

对于FormData,您实际上并不需要Content-Type标头。当在正文中具有FormData类型时,浏览器会自动为您添加。我认为这是因为该标题需要一些额外的信息(当浏览器自动处理它时,它在我的机器上看起来像multipart/form-data; boundary=----WebKitFormBoundaryvAmR7mCXOyHiPIH5)。

这里有更新的笔,看起来像是在工作: https://codepen.io/ccnokes/pen/wyBYOd

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