修复使用fetch和multipart/form-data上传文件的问题

我有一个表单，接受一个文件和一些字段，我想通过Fetch API将这些数据发送到服务器，像这样（React代码）。

<form
  encType='multipart/form-data'
  action='/api/post'
  method='POST'
  onSubmit={async (e) => {
    e.preventDefault()

    if (!title) {
      alert('Enter a title')
      return
    }
    if (!content && !image) {
      alert('Enter some text in the post')
      return
    }

    const body = new FormData()
    body.append('image', image)
    body.append('title', title)
    body.append('content', content)

    const res = await fetch('/api/post', {
      body,
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
  }}
>
...
</form>

我遇到了一个问题。文件的数据实际上没有被发送到服务器上。

解决办法是这样的：你必须不设置头信息。

我确实设置了multipart/form-data 头部，因为你在上传文件时就是这样做的，但显然这就是通过Fetch上传文件的问题所在。

从fetch 请求中删除头信息，事情就可以正常进行了。

下载我的免费JavaScript初学者手册!