为Axios POST请求设置FormData头部以实现文件上传

当你用Axios发送FormData格式的文件请求时，不需要手动硬写multipart/form-data头部——Axios会自动检测请求体是FormData，并自动设置包含正确boundary的Content-Type头部，这是最稳妥的方式。

修改后的代码如下：

const onFileUpload = () => {
  // 创建FormData对象
  const formData = new FormData();

  // 向FormData中添加文件
  formData.append('file', selectedimage);

  console.log(selectedimage);

  // 发送POST请求，Axios自动处理头部
  axios.post("http://localhost:3000/upload", formData)
    .then(res => { 
      console.log(res.statusText);
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
};

如果确实需要手动配置头部（比如要添加其他自定义头部），不要手动指定multipart/form-data的具体值，而是让Axios自动处理，或者通过设置Content-Type: undefined强制Axios使用FormData的默认处理逻辑：

axios.post("http://localhost:3000/upload", formData, {
  headers: {
    // 额外的自定义头部可以加在这里
    'Authorization': 'Bearer your-token',
    // 让Axios自动处理Content-Type
    'Content-Type': undefined
  }
})

注意事项 #

• 确认selectedimage是一个有效的File对象（比如从input[type="file"]中获取的文件），如果是其他类型（如base64字符串），FormData无法正确封装。
• 404错误需后续检查后端/upload接口的路由配置是否正确。

内容的提问来源于stack exchange，提问作者Xeranor