如何从EJS表单获取提交数据？表单数据返回NULL问题排查

问题根源 #

你的表单设置了enctype="multipart/form-data"（因包含文件上传字段），但后端未配置对应解析中间件。Express默认的express.urlencoded无法处理这种编码格式的请求，导致req.body为空。

解决方案 #

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

multer是专门处理multipart/form-data类型请求的Express中间件，支持文件上传。

• 安装multer：

  npm install multer
  

• 在后端主文件（如app.js）中引入并配置：

  const express = require('express');
  const multer = require('multer');
  const app = express();
  
  // 配置内存存储（适合临时处理文件）
  const storage = multer.memoryStorage();
  const upload = multer({ storage: storage });
  
  // 若需保存文件到磁盘，可改用磁盘存储配置：
  // const storage = multer.diskStorage({
  //   destination: (req, file, cb) => {
  //     cb(null, './uploads/') // 需确保uploads文件夹已创建
  //   },
  //   filename: (req, file, cb) => {
  //     cb(null, Date.now() + '-' + file.originalname)
  //   }
  // });
  

• 修改接收表单的路由，添加multer中间件：
  表单仅含一个文件字段image，使用upload.single('image')：

  app.route("/updateTime/:userId")
  .post(upload.single('image'), (req,res)=>{
      // 普通表单字段解析到req.body中
      console.log(req.body.name + "yeah");
      // 上传的文件信息在req.file中
      console.log("上传文件信息:", req.file);
      res.end();
  })
  

2. 基础中间件检查 #

确保Express应用已配置基础urlencoded中间件（处理非文件上传的普通表单）：

app.use(express.urlencoded({ extended: true }));

注意：该中间件无法处理multipart/form-data类型请求，仅用于普通表单。

3. 优化前端冗余AJAX代码 #

当前AJAX请求完全多余，直接跳转页面即可：

function getId(id) {
  // 需添加http://，否则浏览器会将localhost:8000识别为路径片段
  window.location.href = `http://localhost:8000/update/${id}`;
}

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