文件批量上传报400错误，请求Payload为空问题求助

你遇到的400错误+请求payload为空，核心原因是前端没有正确传递文件数据，结合代码来看，主要排查以下几点：

1. 修正请求路径匹配问题 #

后端接口完整路径是/oc/uploadOCFile，但你的前端请求是post("/uploadOCFile", data)，缺少了/oc前缀，导致请求无法匹配到正确的后端接口，进而触发参数缺失的400错误。

修复代码：

post("/oc/uploadOCFile", data)

2. 确认文件获取逻辑正确性 #

你未提供handleFileChange的代码，但如果该方法没有正确将选中的文件存入this.state.csvFile，会导致data.append('file', file)中的file为空，最终请求payload为空。

正确的文件获取示例：

handleFileChange = (e) => {
  // 获取选中的第一个文件
  const csvFile = e.target.files[0];
  this.setState({ csvFile });
}

3. 阻止默认表单提交行为 #

你的按钮设置了type='submit'，如果按钮嵌套在<form>标签内，点击时会触发浏览器默认表单提交，中断你自定义的AJAX请求，导致实际发送的请求未携带FormData。

修复方案二选一：

• 修改按钮类型为button：

  <button type='button' className='btn btn-primary' onClick={this.handleBulkUpload} disabled={this.isBulkUploadDisabled()}>
      Upload
  </button>
  

• 或者在处理方法中阻止默认事件：

  handleBulkUpload = (e) => {
      e.preventDefault(); // 阻止默认表单提交
      alert("Bulk upload submitted")
      const file = this.state.csvFile;
      console.log("csv file: ", file)
  
      let data = new FormData();
      data.append('file', file)
  
      post("/oc/uploadOCFile", data)
          .then((response) => {
              console.log({response})
          }).catch((error) => console.error({error}))
  }
  

4. 检查请求封装的Content-Type设置 #

如果你的post方法是基于axios封装的，要确保没有强制设置Content-Type为application/json。FormData类型的请求，浏览器会自动生成包含boundary的multipart/form-data请求头，手动设置反而会导致后端无法解析文件。

错误示例（需避免）：

// 不要硬编码该配置
headers: { 'Content-Type': 'application/json' }

5. 后端配置检查（可选） #

Spring Boot默认已配置MultipartResolver，但如果项目有自定义配置，确保以下参数正确：

# application.properties示例
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

按以上步骤排查修复后，即可正常传递文件，解决400错误。

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