node.js - 如何使用 fetch 使用 multipart/form-data header 和 FormData 进行 POST

Question

这是一个工作正常的 CURL 示例:

curl -X POST \
  <url> \
  -H 'authorization: Bearer <token>' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F file=@algorithm.jpg \
  -F userId=<userId>

我正在尝试使用 isomorphic-fetch 重现此请求.

我试过下面的代码:

const formData = new FormData();
formData.append('file', file);
formData.append('userId', userId);

return fetch(`<url>`, {      
  method: 'POST',
  headers: {
    'Content-Length': file.length
    'Authorization: Bearer <authorization token>',
    'Content-Type': 'multipart/form-data'
  },
  body: formData
})`

我使用 fs.readFileSync 来生成传递给 FormData 的 file。

前面的示例返回一个 401 HTTP 状态代码(未授权)，并带有一条错误消息，指出嵌入在 token 中的 userId(通过 header 发送)与userId 从 formData 传递过来。

所以我怀疑到达 REST API 的 FormData 格式不正确。

问题可能与Content-Length header 有关，但我没有找到更好的计算方法(如果我不使用Content-Length header 我得到一个 411 HTTP 状态代码 Content-Length header missing.

可能是因为 Content-Length header 中的值不正确而导致失败？

关于失败原因或如何更好地调试它的任何其他建议？

如果需要进一步的信息来澄清这个问题，请直接询问。

更新

我试过 form-data模块，以便使用 formData.getLengthSync()

方法获取正确的 Content-Length 值

但是问题仍然存在(401 错误 HTTP 状态代码响应)。

Answer 1

只需从您的代码中删除 Content-Length 和 Content-Type header ，因为这些 header 将由浏览器自动设置。

如果您打开网络检查器，运行此代码片段并提交表单，您应该会看到 Content-Length 设置正确:

const foo = document.getElementById('foo')
foo.addEventListener('submit', (e) => {
  e.preventDefault()
  const formData = new FormData(foo)
  formData.append('userId', 123)
  fetch('//example.com', {
    method: 'POST',
    body: formData
  })
})

<form id="foo">
  <input id="file" type="file" name="file"/><br><br>
  <button type="submit">Submit</button>
</form>