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

【问题标题】：can't send multipart with fetch but axios works fine无法使用 fetch 发送多部分，但 axios 工作正常
【发布时间】：2020-02-03 11:13:22
【问题描述】：

这是我的代码：

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.

【问题讨论】：

执行uploadImage2(formBody);时出现什么错误？
@laruiss 400 错误请求，文件和元数据为空。

标签： javascript forms axios fetch multipartform-data

【解决方案1】：

请勿使用此标头：'Content-Type': 'multipart/form-data'。

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

说明：

当使用 fetch 和 'Content-Type': 'multipart/form-data' 时，您还必须设置 boundary（请求中发送的字段之间的分隔符）。

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

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

这里有更多见解：Uploading files using 'fetch' and 'FormData'

【讨论】：

请考虑在您的答案中添加更多链接，因为该链接将来可能会更改，还请包括文章中的 stackoverflow 和 MDN 链接。
添加说明

【解决方案2】：

这对我有用：

function uploadImage(payload) {
  return fetch('/api/storage/upload/image/', {
    method: 'POST',
    headers: {
      Authorization: 'Bearer <token>',
    },
    body: payload,
  });
}

通过对比浏览器发送的cURL请求我发现在axios请求中有这样的：

"Content-Type": "multipart/form-data; boundary=---------------------------19679527153991285751414616421",

所以我认为，当您手动指定内容类型时，fetch 会尊重这一点并且不会触及任何东西，同时仍然按照它想要的方式进行操作：-/ 所以您不应该指定它，因为 fetch 会知道自己你正在使用formData()

【讨论】：