电商网站产品更新接口无法获取req.body数据的问题排查

核心问题分析 #

后端req.body.name输出undefined，本质是前端FormData传递方式错误+后端未配置FormData解析中间件，导致更新数据无法正确传递到后端，最终数据库无变更、页面显示旧数据。

前端代码修改 #

1. 修正Axios请求格式 #

发送FormData时需直接传递实例，而非包裹在对象中，同时指定正确的请求头：

// handleUpdate函数中替换请求代码
const { data } = await axios.put(
  `/api/v1/product/update-product/${params.id}`,
  productData,
  {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
);

2. 修复状态提示逻辑 #

原逻辑中成功与错误提示颠倒，调整为：

if (data?.success) {
  toast.success("产品更新成功");
  navigate("/dashboard/manage.vision/admin/products");
} else {
  toast.error(data?.message || "更新失败");
}

3. 区分新旧图片传递 #

selectedImages混合了旧图片路径字符串和新File对象，需分开传递避免解析错误：

// 重构FormData组装逻辑
const productData = new FormData();
productData.append("name", name);
productData.append("description", description);
productData.append("mrp", mrp);
productData.append("category", category);
productData.append("InStock", InStock);
// 传递删除的图片列表
productData.append("deletedImages", JSON.stringify(DeletedImages));

// 区分旧图片路径和新上传文件
selectedImages.forEach(img => {
  if (typeof img === 'string') {
    productData.append("oldImages", img);
  } else {
    productData.append("images", img);
  }
});

后端代码修改 #

1. 配置Multer处理文件上传 #

在Controller顶部添加multer存储配置，用于接收上传的图片：

import Product from "../models/productModel.js";
import Category from "../models/categoryModel.js";
import multer from "multer";
import fs from 'fs';

// 确保uploads目录存在
if (!fs.existsSync('uploads')) {
  fs.mkdirSync('uploads');
}

// multer存储配置
const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, 'uploads/'),
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `${file.fieldname}-${uniqueSuffix}.${file.originalname.split('.').pop()}`);
  }
});
export const upload = multer({ storage });

2. 修正更新逻辑 #

解析FormData字段，处理图片的保留、删除与新增，同时修复模型导入重复问题：

export const updateproducts = async (req, res) => {
    try {
        const { name, description, mrp, category, InStock, oldImages, deletedImages } = req.body;
        let images = [];

        // 处理旧图片：保留未删除的
        if (oldImages) {
          const oldImagesList = Array.isArray(oldImages) ? oldImages : [oldImages];
          const deletedList = JSON.parse(deletedImages || '[]');
          images = oldImagesList.filter(img => !deletedList.includes(img));
        }

        // 添加新上传的图片路径
        if (req.files) {
          req.files.forEach(file => images.push(file.filename));
        }

        console.log("name: ", name); // 现在可正常输出

        const product = await Product.findByIdAndUpdate(
            req.params.id,
            {
                name,
                description,
                images,
                mrp: Number(mrp),
                category,
                InStock: Number(InStock)
                // rating、numReviews、isFeatured若无需前端修改，可保留原数据或按需处理
            },
            { new: true }
        );

        if (!product) {
            return res.status(404).json({ success: false, message: '产品未找到或无法更新' });
        }

        res.json({ success: true, message: '产品更新成功', updatedProduct: product });
    } catch (error) {
        console.error(error);
        res.status(500).json({ success: false, message: '服务器内部错误' });
    }
};

3. 路由补充multer中间件 #

确保路由使用multer处理文件上传：

// 路由文件示例
import express from 'express';
import { updateproducts, upload } from '../controllers/productController.js';

const router = express.Router();

router.put('/update-product/:id', upload.array('images'), updateproducts);

export default router;

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