React中如何将文件上传与状态值一同通过Axios提交？

嘿，咱们一步步来解决你的问题：

1. 是否必须使用FormData发送文件？ #

没错，必须使用FormData。因为文件属于二进制数据，普通的JSON格式无法正确传输二进制内容。FormData是专门为这种场景设计的，它会自动将请求的Content-Type设置为multipart/form-data，这是后端接收文件数据的标准格式。

2. 如何修改doSubmit方法，把所有状态值加入FormData并提交？ #

你原来的代码有两个问题：一是没有把普通字段（姓名、ID、入职日期）加入FormData，二是文件字段的写法有误。这里是修改后的完整方法：

doSubmit() {
  // 创建FormData实例
  const formData = new FormData();
  
  // 将状态里的所有字段都添加到FormData中
  formData.append('employee_Name', this.state.data.employee_Name);
  formData.append('employee_Id', this.state.data.employee_Id);
  formData.append('employee_Doj', this.state.data.employee_Doj);
  // 添加文件，注意字段名要和后端接口期望的一致
  formData.append('employee_ResumeFile', this.state.data.employee_ResumeFile);

  // 发送Axios请求
  axios.put(
    `${apiEndpoint}/update/${this.props.match.params.id}/basic-details`,
    formData,
    {
      // 可选：如果后端需要，这里可以设置请求头，但Axios通常会自动处理multipart/form-data的头
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  )
  .then(response => {
    // 请求成功后的处理逻辑
    console.log('提交成功', response);
  })
  .catch(error => {
    // 请求失败后的处理逻辑
    console.error('提交失败', error);
  });
}

关键说明： #

• 所有表单字段（无论是文本还是文件）都要通过formData.append()方法添加，字段名要和后端接口定义的参数名完全匹配，否则后端接收不到对应数据。
• Axios会自动识别FormData类型，并设置正确的请求头，所以上面的headers配置是可选的，但如果你的后端有特殊要求，可以加上。
• 你的onChangeHandler逻辑是正确的，已经把文件对象存入了状态，不需要修改。

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