React提交含file类型输入的表单时请求挂起 无法写入数据库

核心问题原因 #

• 文件上传场景错误使用JSON格式传输二进制数据，未使用FormData封装请求参数，导致请求无法被正常解析、持续挂起
• 文件输入框取值逻辑错误：type="file"的输入框无法通过e.target.value获取真实文件对象，该属性仅返回本地文件路径字符串，真实文件存储在e.target.files集合中
• React受控组件绑定错误：文件类型输入框为只读原生组件，手动绑定value属性会导致DOM状态异常
• 请求缺少正确的编码格式标识，后端无法识别解析二进制文件字段
• 缺少请求错误捕获逻辑，异常发生时无明确报错提示
• 本地状态更新违反React不可变原则，直接修改原books数组可能导致状态更新异常

分步修复代码 #

1. 修正表单输入处理逻辑 #

调整onInputChange方法，区分普通文本输入和文件输入的取值规则，同时移除文件输入框上多余的value绑定：

const onInputChange = (e) => {
  const fieldName = e.target.name;
  if (e.target.type === 'file') {
    // 单文件上传场景取files数组第一个元素
    setNewBook({...newBook, [fieldName]: e.target.files[0]})
  } else {
    setNewBook({...newBook, [fieldName]: e.target.value})
  }
}

// 文件输入框部分代码，删除value={pdf}绑定
<Form.Group>                        
  <Form.Control
    type ="file"
    placeholder="pdf"
    name="pdf"
    onChange={e => onInputChange(e)}
  />
</Form.Group>

2. 修正上传请求逻辑 #

使用FormData封装所有文本字段和文件对象，发送请求时不要手动设置Content-Type请求头，浏览器会自动补全正确的边界标识：

const addBook =  ( name, author, category, about, pdf, image) => {
  const formData = new FormData();
  formData.append('name', name);
  formData.append('author', author);
  formData.append('category', category);
  formData.append('about', about);
  formData.append('image', image);
  formData.append('pdf', pdf);

  axios.post('http://localhost:3004/book', formData)
    .then(response => {  
      // 遵循不可变更新原则，不直接修改原数组
      setBooks([...books, { name, author, category, about, pdf, image }]);  
    })
    .catch(error => {
      console.error('上传请求异常:', error);
    });
}   

3. 后端配置校验 #

确保运行在3004端口的后端服务已经配置了支持multipart/form-data格式的解析中间件：如果是Express服务，需要引入multer中间件处理文件上传逻辑，未配置该类中间件时后端无法解析请求体，会导致请求持续处于pending状态。

• 祝大家编码顺利~

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