提交Pug表单时req.body返回空对象{}的技术问题咨询

1. 表单输入缺少name属性 #

HTML表单提交数据时，依赖输入元素的name属性来标识字段，你的Pug代码里的输入框仅设置了id，没有name属性，导致服务器无法识别提交的字段内容。

修改Pug表单，给输入框添加name属性：

form.form.form-user-data(action='/submit-user-data' method='POST')
    .form__group
      label.form__label(for='name') Name
      input#name.form__input(type='text', name='name', value=`${user.name}`, required)
    .form__group.ma-bt-md
      label.form__label(for='email') Email
      input#email.form__input(type='email', name='email', value=`${user.email}`, required)
    .form__group.form__photo-upload
      img.form__user-photo(src=`img/${user.photo}`, alt='User photo')
      a.btn-text(href='') Choose new photo
    .form__group.right
      button.btn.btn--small.btn--green(type="submit") Save settings

2. 未配置请求体解析中间件 #

Express框架默认不会自动解析POST请求的表单数据，需要添加express.urlencoded()中间件处理application/x-www-form-urlencoded类型的请求体（普通表单默认编码类型）。

在你的Express主文件（如app.js）中添加以下代码：

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

// 解析表单请求体
app.use(express.urlencoded({ extended: true }));

// 挂载路由
const router = require('./你的路由文件路径');
app.use(router);

extended: true允许解析复杂的对象和数组，若仅需简单键值对，可设为false。

完成以上两步后重启服务器，提交表单即可正常获取req.body中的数据。

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