如何从Node.js向React同时发送JSON数据与多文件？

React 前端实现 #

在表单提交时，使用FormData封装JSON数据和文件，具体代码如下：

// 表单提交处理函数
const handleSubmit = async (e) => {
  e.preventDefault();
  
  // 创建FormData实例
  const formData = new FormData();
  
  // 将JSON字段转为字符串后添加到FormData
  const caseData = {
    Name: formState.name,
    Description: formState.description,
    Actors: formState.actors,
    "Pre-Conditions": formState.preConditions,
    "Post-Conditions": formState.postConditions,
    Steps: formState.steps,
    "Test Cases": formState.testCases
  };
  formData.append('caseData', JSON.stringify(caseData));
  
  // 添加单张图片文件
  if (formState.picture) {
    formData.append('picture', formState.picture);
  }
  
  // 若需上传多张图片，可循环添加（示例）
  // formState.pictures.forEach((pic, index) => {
  //   formData.append(`pictures[${index}]`, pic);
  // });
  
  try {
    const response = await fetch('/api/add-case', {
      method: 'POST',
      body: formData
      // 无需手动设置Content-Type，浏览器会自动生成multipart/form-data请求头
    });
    
    const result = await response.json();
    console.log('提交成功:', result);
  } catch (error) {
    console.error('提交失败:', error);
  }
};

说明：

• 先将除Picture外的JSON字段整合为对象，转为字符串后以caseData为键添加到FormData
• 直接将从input[type="file"]获取的文件对象添加到FormData，键名为picture（可自定义）

Node.js 后端实现 #

使用multer中间件处理文件上传，同时解析FormData中的JSON数据：

首先安装依赖：

npm install multer express

后端代码示例：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer的文件存储路径与文件名规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads'); // 确保项目根目录下的uploads文件夹已创建
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

// 处理单文件上传的接口
app.post('/api/add-case', upload.single('picture'), (req, res) => {
  try {
    // 解析FormData中的JSON字符串为对象
    const caseData = JSON.parse(req.body.caseData);
    
    // 获取上传的图片文件信息
    const picture = req.file;
    
    // 此处可执行存入数据库等业务逻辑
    console.log('用例基础数据:', caseData);
    console.log('图片详情:', picture);
    
    res.status(200).json({
      message: '用例添加成功',
      caseId: 'CASE_' + Date.now(),
      pictureUrl: `/uploads/${picture.filename}`
    });
  } catch (error) {
    res.status(500).json({ message: '处理失败', error: error.message });
  }
});

// 若需处理多张图片，使用upload.array（示例）
// app.post('/api/add-case', upload.array('pictures', 5), (req, res) => {
//   const caseData = JSON.parse(req.body.caseData);
//   const pictures = req.files;
//   // ...业务处理逻辑
// });

app.listen(3001, () => {
  console.log('服务运行在3001端口');
});

说明：

• upload.single('picture')对应前端单文件上传，多文件场景可替换为upload.array('pictures', 5)（数字为允许上传的最大文件数）
• 通过req.body.caseData获取前端传入的JSON字符串，解析后得到完整用例数据
• req.file（单文件）或req.files（多文件）包含上传文件的存储路径、大小、原始文件名等信息

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