javascript - 无法使用 fetch 发送多部分，但 axios 工作正常

Question

这是我的代码:

function uploadImage(payload) {
  return fetch('/api/storage/upload/image/', {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
      Accept: 'application/json',
      Authorization: 'Bearer <token>',
    },
    body: payload,
  });
}
function uploadImage2(payload) {
  return axios.post('/api/storage/upload/image/', payload, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Accept: 'application/json',
      Authorization: 'Bearer <token>',
    },
  });
}
function test(file, meta_data) {
  var formBody = new FormData();
  formBody.set('image', file);
  formBody.set('meta_data', meta_data);

  uploadImage(formBody);
  // doesn't work
  uploadImage2(formBody);
  // works
}

有人可以向我解释一下我应该如何使用 fetch 发送多部分请求吗？

我使用此代码得到的错误是:400 bad request, file and meta_data are null.

Answer 1

请勿使用此 header :'Content-Type': 'multipart/form-data'。

删除标题，它应该可以工作。

说明:

当将 fetch 与 'Content-Type': 'multipart/form-data' 一起使用时，您还必须设置 boundary (字段之间的分隔符)在请求中发送)。

如果没有边界，接收请求的服务器将不知道字段在哪里开始和结束。

您可以自己设置边界，但最好让浏览器通过完全删除 'Content-Type' header 来自动执行此操作。

这里有一些更多的见解:Uploading files using 'fetch' and 'FormData'