ReactJS中上传文件控制台可获取文件但接口返回400错误如何解决

• 核心错误：文件上传使用了错误的请求编码格式。你直接将二进制File对象放在普通JSON结构中传输，axios默认的Content-Type为application/json，会自动将请求体做JSON序列化，而File属于浏览器二进制对象，没有可被JSON序列化的普通属性，最终序列化结果就是{"dataFile":{}}，后端收到的自然是空对象，返回400错误。
• 附加小问题：
  • handleFileChange中调用setPdffile后立即打印pdffile拿不到最新值，是React state异步批处理更新的特性导致的，不影响最终提交逻辑，但调试时会产生误导。
  • 你贴出的代码中提交按钮没有绑定SubmitPDF点击事件，如果实际运行能触发请求说明是代码片段遗漏，否则需要补上事件绑定。

• 提交文件时使用FormData对象封装参数，不要用普通JSON对象传文件
• 配置请求头为multipart/form-data格式，注意不要手动硬编码带boundary的Content-Type，让浏览器/axios自动生成合法的请求头，否则会出现boundary缺失导致后端解析失败
• （可选）调整文件选择时的调试逻辑，直接打印选中的文件对象而非未更新的state
• （可选）补全提交按钮的点击事件绑定

修复后的核心代码如下：

function AdminPanel() {
  const [show, setShow] = useState(false);
  // 文件初始值设为null语义更准确
  const [pdffile, setPdffile] = useState(null);

  function handleFileChange(e) {
    const selectedFile = e.target.files[0];
    setPdffile(selectedFile);
    // 调试直接打印当前选中的文件，不要打印未更新的state
    console.log("选中的文件", selectedFile);
  }

  const SubmitPDF = () => {
    if (!pdffile) {
      alert('请先选择文件');
      return;
    }
    // 构造FormData实例封装上传参数
    const uploadData = new FormData();
    // 按照后端要求的字段名append文件
    uploadData.append('dataFile', pdffile);

    axios({
      method: "post",
      url: "替换为你的实际接口地址",
      data: uploadData,
      headers: {
        // 指定表单上传格式，axios会自动补全boundary参数
        'Content-Type': 'multipart/form-data'
      }
    }).then(res => {
      console.log("上传成功", res)
    }).catch(err => {
      console.error("上传失败", err)
    })
  }

  return (
    <>
      <div className="form-group form_aside">
        <input 
          type="file" 
          className="form-control" 
          id="files"
          name="PDF" 
          onChange={handleFileChange} 
        />
      </div>
      {/* 绑定提交事件 */}
      <button onClick={SubmitPDF}>Submit</button>
    </>
  )
}

注意：如果配置了上述请求头后仍然报参数解析错误，可以删掉headers里的Content-Type配置，新版本axios会自动识别传入的FormData对象，自动设置正确的请求头。

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