使用FormData提交表单至Express服务器失败求助

你遇到的核心问题是Express默认没有配置处理multipart/form-data格式数据的中间件，而你用FormData提交的正是这种格式，所以req.body才会为空。另外，服务器返回的res.redirect在fetch请求里不会自动触发页面跳转，得手动处理。

1. 安装并配置multer中间件 #

multer是Express官方推荐的处理multipart/form-data的中间件，先安装它：

npm install multer

在index.js中引入并配置：

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

// 无文件上传场景，用内存存储即可
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 保留原有urlencoded中间件，兼容普通表单提交
app.use(express.urlencoded({ extended: true }));

2. 修改服务器端/task路由 #

在路由中使用upload.none()解析纯文本字段的FormData：

app.post("/task", upload.none(), (req, res)=>{
  var data = req.body; // 现在可以正常拿到表单数据了
  console.log('收到表单数据:', data);
  
  // 先做参数校验，避免报错
  if (!data.start_date || !data.end_date) {
    console.log('缺少日期参数');
    return res.status(400).send('请选择开始和结束时间');
  }
  
  const d1 = new Date(data.start_date);
  const d2 = new Date(data.end_date);
  if(d1 >= d2) {
    console.log("错误：开始时间晚于结束时间");
    return res.status(400).send('开始时间不能晚于结束时间');
  } else{
    data.status = "pending";
    todo.push(data);
    console.log("数据添加成功");
  }

  // 给前端返回成功状态，由前端触发刷新
  res.status(200).json({ success: true });
});

3. 调整前端fetch逻辑，提交后刷新页面 #

fetch不会自动处理服务器的redirect响应，所以改成接收成功响应后手动刷新：

document.getElementById("task_form").addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(this);

    fetch('/task', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`提交失败，状态码：${response.status}`);
        }
        return response.json();
    })
    .then(() => {
        // 提交成功后强制刷新页面
        window.location.reload(true);
    })
    .catch(error => {
        console.error('提交出错:', error);
        // 可在此添加用户提示，比如alert('提交失败，请检查时间设置')
    });
});

额外优化：明确表单编码类型 #

虽然FormData会自动设置请求头，但在form标签上加上属性更清晰：

<form id="task_form" action="/task" method="post" enctype="multipart/form-data">
    <!-- 原有表单内容不变 -->
</form>

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