向数据库插入数据时返回Error 400的问题求助

核心问题 #

你遇到的400错误（非空约束违规）主要来自两个关键问题：

1. 前端提交了不存在的category字段 #

你的Formik初始化值里没有category，页面也没有对应的输入控件，但提交时却执行了formData.append('category', values.category)，导致category的值为undefined。如果数据库中category字段设置了非空约束，直接触发报错。

2. 后端未解析FormData格式请求 #

前端用FormData提交数据，但Express默认不支持解析multipart/form-data格式，导致后端req.body为空对象，执行Products.create(req.body)时所有字段缺失，触发数据库非空约束错误。

具体修复步骤 #

前端修复 #

• 如果category是必填字段：
  在Formik的initialValues中添加category: ''，并在表单中添加对应的输入框：

  // 在Formik的initialValues里添加
  initialValues={{
      name: '',
      desc: '',
      pic: '',
      price: '',
      category: '' // 新增
  }}
  
  // 在Form中添加输入框
  <Field type="text" name="category" placeholder="دسته بندی محصول" className='addproduct-product-category'/>
  

• 如果category不是必填字段：
  直接删除formData.append('category', values.category)这一行。

后端修复 #

1. 安装处理FormData的中间件multer：

   npm install multer
   

2. 修改routes/products.js中的POST接口，配置multer解析文件和文本字段：

   const express = require('express');
   const router = express.Router();
   const Products = require('../models/Product');
   const multer = require('multer');
   
   // 用内存存储上传的文件（适合小图片，如需存磁盘可调整配置）
   const storage = multer.memoryStorage();
   const upload = multer({ storage: storage });
   
   // 用upload.single('pic')解析名为pic的文件字段
   router.post('/', upload.single('pic'), async (req, res) => {
       try {
           // 构建产品数据：req.body是文本字段，req.file是上传的图片buffer
           const productData = {
               name: req.body.name,
               category: req.body.category,
               desc: req.body.desc,
               price: req.body.price,
               image: req.file.buffer // 对应数据库模型中的image字段（参考你的GET接口逻辑）
           };
           const product = await Products.create(productData);
           res.status(201).json(product);
       } catch (error) {
           res.status(400).json({ error: error.message });
       }
   });
   

额外检查点 #

• 确认数据库Product模型的所有必填字段，前端都有对应的输入和提交逻辑；
• 前端提交前可打印FormData内容，验证字段值是否正确：

  // 在axios.post前添加
  for (let [key, value] of formData.entries()) {
      console.log(key, value);
  }
  

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