React+Node.js电商项目：FormData提交后后端req.body为空求助

我用React和Node.js开发电商应用，添加新产品时遇到问题：前端用FormData封装产品标题、RAM、价格、库存、描述及图片等信息，控制台能正常输出所有值，但提交到后端控制器后，req.body是空对象，拿不到产品详情。

import React, { useState } from 'react'; import { addProduct } from '../../services/userApi';

const Modal = ({ isOpen, onClose, title }) => { 

const [titles, setTitle] = useState(''); 
const [ram, setRam] = useState(''); 
const [price, setPrice] = useState(''); 
const [totalProducts, setTotalProducts] = useState(''); 
const [description, setDescription] = useState(''); 
const [images, setImages] = useState([]); 
const [previewImages, setPreviewImages] = useState([]);

const handleImageChange = (e) => { const files = Array.from(e.target.files); setImages([...images, ...files]);

// Update the state with preview images
const previews = files.map((file) => URL.createObjectURL(file));
setPreviewImages([...previewImages, ...previews]);};

const removeImage = (index) => { // Remove the selected image and its preview const updatedImages = [...images]; updatedImages.splice(index, 1); setImages(updatedImages);
const updatedPreviews = [...previewImages];
updatedPreviews.splice(index, 1);
setPreviewImages(updatedPreviews);};

const handleSubmit = async (e) => { e.preventDefault() try { console.log(titles,ram,price,totalProducts,description,images); // Create a FormData object to handle file uploads const formData = new FormData();

 // Append non-file fields
  formData.append('title', titles);
  formData.append('ram', ram);
  formData.append('price', price);
  formData.append('totalProducts', totalProducts);
  formData.append('description', description);

  images.forEach((image, index) => {
    formData.append(`images[${index}]`, image);
  });


  // Make the API call to add the product
  const response = await addProduct(formData);

  // Handle the response as needed
  console.log(response.data);

  // Optionally, you can perform additional actions after adding the product

  // Close the modal
  onClose();
} catch (error) {
  console.error(error.message);
}
};

if (!isOpen) return null;

 return ( 
<form onSubmit={handleSubmit} encType="multipart/form-data"> 
<div className="modalOverlay"> <div className="modalContent"> <div className="modalHeader"> <span className="modalTitle">{title}</span> <button className="closeButton" onClick={onClose}> X </button> </div> <div className="modalBody"> <div> <label>Title:</label> <input type="text" name="titles" value={titles} onChange={(event) => setTitle(event.target.value)} /> </div>

 {/* RAM Input */}
      <div>
        <label htmlFor='ram'>RAM:</label>
        <input type="text" name="ram"  value={ram} onChange={(event) => setRam(event.target.value)}/>
      </div>

      {/* Price Input */}
      <div>
        <label>Price:</label>
        <input type="text" name="price" value={price} onChange={(event) => setPrice(event.target.value)} />
      </div>

      {/* Total Products Input */}
      <div>
        <label>Total Products:</label>
        <input type="number" name="totalProducts" value={totalProducts} onChange={(event) => setTotalProducts(event.target.value)} />
      </div>

      {/* Description Input */}
      <div>
        <label>Description:</label>
        <textarea type='text' name="description" value={description} onChange={(event) => setDescription(event.target.value)}/>
      </div>
      {/* Multiple Image Upload Input */}
      <div className="imageUploadContainer">
        <label className="uploadLabel">Upload Images:</label>
        <input type="file" accept="image/*" multiple onChange={handleImageChange} />
      </div>

      {/* Image Previews */}
      <div className="imagePreviewContainer">
        {previewImages.map((preview, index) => (
          <div key={index} className="imagePreviewItem">
            <img src={preview} alt={`Preview ${index}`} className="imagePreview" />
            <button onClick={() => removeImage(index)} className="removeButton">
              Remove
            </button>
          </div>
        ))}
      </div>

      {/* Submit Button */}
      <button className="submitProButton" type='submit'>
        Submit
      </button>
    </div>
  </div>
</div>
</form>
);};

export default Modal;

const addProduct = async (req, res) => { 
try {const images = req.files && req.files.length > 0 ? req.files.map(file => file.path) : [];

  const {
    title,
    ram,
    price,
    totalProducts,
    description,
  } = req.body;

  // Note: image is not directly accessible from req.body when using FormData
  


  const newProduct = new productModel({
    title:title,
    ram:ram,
    price:price,
    totalProducts:totalProducts,
    description:description,
    image: images ? images.path : '', // Assuming you save the image path in your model
  });

  await newProduct.save();

  res.status(201).json({ message: 'Product added successfully', product: newProduct });
} catch (error) {
  console.error(error.message);
  res.status(500).json({ error: 'Server Error' });
}};

核心问题是后端未配置处理multipart/form-data格式的中间件，Express默认的express.json()和express.urlencoded()无法解析FormData，导致req.body为空。

• 步骤1：安装multer中间件
  这是Node.js处理文件上传的主流工具，执行安装命令：

  npm install multer
  

• 步骤2：配置multer存储规则
  在路由文件中引入并配置存储路径和文件名规则：

  const express = require('express');
  const router = express.Router();
  const multer = require('multer');
  const path = require('path');
  const fs = require('fs');
  
  // 配置文件存储位置和命名规则
  const storage = multer.diskStorage({
    destination: (req, file, cb) => {
      const uploadDir = path.join(__dirname, '../uploads');
      // 自动创建uploads目录（如果不存在）
      fs.mkdirSync(uploadDir, { recursive: true });
      cb(null, uploadDir);
    },
    filename: (req, file, cb) => {
      // 生成唯一文件名，避免重复覆盖
      const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1E9)}${path.extname(file.originalname)}`;
      cb(null, uniqueName);
    }
  });
  
  const upload = multer({ storage: storage });
  

• 步骤3：修改路由配置
  在添加产品的路由中使用multer的array方法，接收多张图片：

  // 假设路由路径为/api/products/add，upload.array('images')表示接收name为images的多文件
  router.post('/api/products/add', upload.array('images'), addProduct);
  

• 步骤4：修正控制器的图片处理逻辑
  原代码中images.path会报错，因为images是路径数组，直接赋值即可：

  const newProduct = new productModel({
    title: title,
    ram: ram,
    price: price,
    totalProducts: totalProducts,
    description: description,
    image: images // 直接存储路径数组
  });
  

• 步骤5：检查前端请求配置
  确保前端API请求不要手动设置Content-Type，FormData会自动生成正确的请求头。比如Axios请求示例：

  // userApi.js中的addProduct函数
  import axios from 'axios';
  
  export const addProduct = (formData) => {
    return axios.post('/api/products/add', formData);
    // 不要手动设置headers中的Content-Type，否则会破坏FormData的边界标识
  };
  

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