React+Flask汽车数据提交异常：前端图片上传请求修复求助

核心问题分析 #

• Flask返回BadRequestKeyError，说明前端提交的FormData未正确携带名为photo的文件字段；Postman测试正常可排除后端接口问题，问题集中在前端FormData构建或文件上传逻辑。

针对性修复步骤 #

1. 修正PhotoUpload组件的文件传递逻辑 #

确保组件直接传递File对象给父组件，避免转码导致无法识别：

// PhotoUpload.jsx 关键代码
const PhotoUpload = ({ onPhotoSelect }) => {
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      // 直接传递原生File对象，不做base64转换
      onPhotoSelect(file);
    }
  };

  return (
    <input
      type="file"
      accept="image/*"
      onChange={handleFileChange}
      className="file-input file-input-bordered w-full max-w-xs"
    />
  );
};

2. 重构handleSubmit的FormData构建逻辑 #

多步骤表单易遗漏字段，需确保所有数据（含文件）正确添加，且不手动设置Content-Type：

// AddCarForm.jsx 关键代码
const handleSubmit = async (e) => {
  e.preventDefault();
  
  const formData = new FormData();
  // 添加普通表单字段（根据实际业务字段调整）
  formData.append('make', formState.make);
  formData.append('model', formState.model);
  formData.append('year', formState.year);
  // 核心：添加文件字段，名称必须与后端要求的'photo'完全一致
  if (selectedPhoto) {
    formData.append('photo', selectedPhoto);
  }

  try {
    const response = await fetch('/api/add-car', {
      method: 'POST',
      body: formData,
      // 必须删除手动设置的Content-Type，浏览器会自动生成带boundary的正确头
      // headers: { 'Content-Type': 'multipart/form-data' } // 此行务必移除
    });
    const result = await response.json();
    // 处理成功逻辑（如跳转、提示）
  } catch (error) {
    console.error('提交失败:', error);
  }
};

3. 确认后端接收字段名匹配 #

检查Flask接口的字段名是否与前端一致：

# app.py 关键代码验证
@app.route('/api/add-car', methods=['POST'])
def add_car():
    # 确保此处字段名为'photo'，与前端append的名称完全匹配
    if 'photo' not in request.files:
        return jsonify({'error': '未上传图片'}), 400
    photo_file = request.files['photo']
    # 后续文件保存、数据入库逻辑...

排查验证要点 #

• 在handleSubmit中打印console.log(selectedPhoto)，确认是File对象而非null/字符串。
• 打开浏览器开发者工具Network面板，查看请求的FormData，确认photo字段存在且类型为File。
• 多步骤切换时检查是否意外清空了selectedPhoto状态。

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