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
}

有人可以向我解释我应该如何通过提取发送多部分请求吗？

我收到的这段代码错误是：400 bad request, file and meta_data are null.

Answer 1

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

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

说明：

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

在没有边界的情况下，接收请求的服务器将不知道字段的开始位置和结束位置。

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

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

Answer 2

这对我有用：

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

通过比较浏览器发送的cURL请求，我发现axios请求中具有以下内容：

formData()

所以我认为，当您手动指定内容类型时，fetch尊重该内容类型，并且在仍然进行操作时不碰任何东西，这就是它想要的方式：-/所以您不应该指定它，因为fetch会知道自身，因为您正在使用<button className="nextButton" onClick={() => this.handleClick()}>Next </button>

无法通过获取发送多部分内容，但axios可以正常工作

2 个答案:

说明：