React提交表单到Node服务无法上传图片，应如何实现文件上传功能？

问题根因 #

• 文件类型输入（<input type="file"/>）的选中内容不会存在input.value属性中，你当前的代码将文件输入的value（仅为本地虚拟路径字符串，无实际文件内容）存入了state，最终append到FormData的是无效字符串，后端无法识别为文件。
• Postman是直接选中真实文件对象提交，所以可以正常上传。

修复步骤 #

1. 调整handleChange逻辑，区分普通输入和文件输入 #

修改你的handleChange函数，当识别到是文件类型输入时，读取input.files[0]（即选中的File对象）存入state：

// 修改后的handleChange
handleChange = ({ currentTarget: input }) => {
    const errors = { ...this.state.errors }
    const errorMessage = this.validateProperty(input)
    if (errorMessage) errors[input.name] = errorMessage
    else delete errors[input.name]

    const data = { ...this.state.data }
    // 新增文件输入判断逻辑
    if (input.type === "file") {
      data[input.name] = input.files[0];
    } else {
      data[input.name] = input.value;
    }
    this.setState({ data, errors })
  }

2. 确认文件输入框配置 #

保证你的文件上传输入框的name属性值为image，和state中存储的key匹配：

<input type="file" name="image" accept="image/*" onChange={this.handleChange}/>

3. 检查请求配置 #

确认saveEmployee方法提交FormData时，不要手动设置Content-Type: multipart/form-data请求头，浏览器会自动给FormData请求添加该头并生成对应的分隔符boundary，手动设置会导致分隔符缺失，后端无法解析文件。
正确的请求示例（以axios为例）：

const saveEmployee = (formData) => {
  // 不需要额外配置headers
  return axios.post("/api/employees", formData);
}

完成以上修改后即可正常提交图片文件。

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