React表单+Express后端：图片上传与数据持久化故障排查

核心问题定位 #

• 后端仅配置了body-parser.json()，无法解析前端提交的FormData格式数据，导致req.body为空或格式异常，写入data.json时触发语法错误。
• 直接存储Base64图片字符串会导致JSON文件体积过大，破坏可读性且易引发解析问题。

前端代码调整 #

前端的FormData提交逻辑基本正确，只需确认两点：

1. 提交时不要手动设置Content-Type，浏览器会自动为FormData添加正确的multipart/form-data请求头。
2. 更新状态时，用后端返回的图片路径替换原File对象，确保前端状态可正常序列化。

修正后的handleSubmit函数：

const handleSubmit = (event) => {
  event.preventDefault();
  const formData = new FormData();
  formData.append('checkedService', carFormData.checkedService);
  formData.append('makeAndModel', carFormData.makeAndModel);
  formData.append('color', carFormData.color);
  formData.append('licensePlate', carFormData.licensePlate);
  formData.append('carMessage', carFormData.carMessage);
  formData.append('type', 'car');
  if (carFormData.image) {
    formData.append('image', carFormData.image);
  }

  fetch('http://localhost:3500/car', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
    setCart((currentCart) => {
      const updatedCart = [...currentCart];
      const newEntry = {
        ...carFormData,
        id: data.id,
        image: data.imagePath // 用后端返回的图片路径替换File对象
      };
      if (editingIndex != null) {
        updatedCart[editingIndex] = newEntry;
      } else {
        updatedCart.push(newEntry);
      }
      return updatedCart;
    });
    resetCarForm();
  })
  .catch((error) => {
    console.error('Error:', error);
  });
};

后端完整实现（关键修复） #

需要引入multer中间件处理文件上传，将图片存储到服务器本地静态目录，仅在data.json中保存图片路径：

1. 安装依赖：

npm install multer

2. 修改server.js：

const express = require('express');
const fs = require('fs');
const path = require('path');
const cors = require('cors');
const multer = require('multer');

const app = express();
const port = 3500;

app.use(cors());
app.use(express.json());
app.use(express.static('public')); // 暴露静态文件目录，允许前端访问图片

// 配置multer存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const uploadDir = path.join(__dirname, 'public/images');
    // 自动创建不存在的目录
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名避免覆盖
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `${uniqueSuffix}-${file.originalname}`);
  }
});

const upload = multer({ storage: storage });
const DATA_FILE = path.join(__dirname, './data.json');

// 处理POST请求，用upload.single('image')解析单文件
app.post('/car', upload.single('image'), (req, res) => {
  fs.readFile(DATA_FILE, 'utf8', (err, data) => {
    if (err) {
      console.error("读取文件错误:", err);
      return res.status(500).json({ error: '读取数据库文件失败' });
    }

    let DB = [];
    try {
      DB = JSON.parse(data);
    } catch (parseErr) {
      console.error("JSON解析错误:", parseErr);
      return res.status(500).json({ error: '解析数据库文件失败' });
    }

    // 构造新条目，转换FormData中的布尔值
    const newEntry = {
      id: Date.now().toString(),
      checkedService: req.body.checkedService === 'true',
      makeAndModel: req.body.makeAndModel,
      color: req.body.color,
      licensePlate: req.body.licensePlate,
      carMessage: req.body.carMessage,
      type: req.body.type,
      image: req.file ? `/images/${req.file.filename}` : null
    };

    DB.push(newEntry);

    fs.writeFile(DATA_FILE, JSON.stringify(DB, null, 2), 'utf8', (err) => {
      if (err) {
        console.error("写入文件错误:", err);
        return res.status(500).json({ error: '写入数据库文件失败' });
      }
      res.status(201).json({ 
        message: '车辆服务条目已添加',
        id: newEntry.id,
        imagePath: newEntry.image
      });
    });
  });
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

数据持久化说明 #

• 图片文件：存储在服务器public/images目录下，前端可通过http://localhost:3500/[imagePath]直接访问。
• 表单数据：包含图片相对路径，存储在data.json中，格式简洁无冗余，避免了Base64字符串导致的JSON结构问题。

后续迁移说明 #

若后续切换到MongoDB等数据库，只需：

1. 将图片上传逻辑替换为云存储（如OSS、S3），获取云存储地址。
2. 将表单数据（含图片地址）存入数据库，无需修改前端核心提交逻辑。

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