表单提交时输入值在Node.js/Express服务器端显示为undefined求助

我是一名学生，这是我的第一个Web项目。服务端采用Node.js和Express实现，客户端使用HTML、JavaScript和CSS。提交表单时，表单输入字段的值发送到服务器后显示为undefined，导致无法存储数据或更新contributions区域。已检查拼写和使用的模块，服务器端打印接收的tit和contr均为undefined。

客户端代码 #

<body>

<header>
    <script>
        $(function() {
            $('header').load('navbar.html');
        });
    </script>
</header>

<div id="container">

    <form id = "kontaktFormular" action="/forum/beitrag" method = 'POST'>
        <h1>Forum</h1>

        <input id ="thema" type="text" name="tit" placeholder="Thema" required>
        <input id ="beitragTextfeld" type="text" name="contr" placeholder="Sagen Sie uns Ihre Meinung!" required>

        <button type="submit">Abschicken</button>

    </form>

    <div id="beitraege">
        <p id = "contributions"></p>
    </div>

    <script>

        // Function to fetch and update the entries
        async function updateEntries() {
            const response = await fetch('/forum/beitrag');
            const entries = await response.json();

            const entryList = document.getElementById('contributions');
            entryList.innerHTML = '';

            entries.forEach(entry => {
                const listItem = document.createElement('li');
                listItem.textContent = `Date:${entry.datum} Title: ${entry.thema}, Contribution: ${entry.beitrag}`;

                entryList.appendChild(listItem);
            });
        }

        window.addEventListener('load', updateEntries);


        document.getElementById('kontaktFormular').addEventListener('submit', async (event) => {
            event.preventDefault();

            const formData = new FormData(event.currentTarget);
            const tit = formData.get('tit');
            const contr = formData.get('contr');

            const response = await fetch(event.currentTarget.action, {
                method: 'POST',
                body: formData
            });

            const updatedEntries = await response.json();

            updateEntries(updatedEntries);
        });

    </script>
</div>

</body>

服务端代码 #

const express = require('express');
const app = express();
const path = require('path');
const port = 8000;

app.use(express.urlencoded({extended: false}));
app.use(express.static('.'));
app.use(express.json());

app.get('/forum/beitrag', (req, res) => {
    res.send(entryData);
    console.log("posted");
});

let entryData = [
    {datum: "10.Juni.2023", thema: "mein beitrag", beitrag: "digga warum geht das nicht"}];

app.post('/forum/beitrag', (req, res) => {

    const { tit, contr } = req.body;
    console.log({ tit, contr });
    const newEntry = {datum: createDate(), thema: tit, beitrag: contr};

    entryData.push(newEntry);

    res.json(entryData);
});

app.get('/logout', (req, res) => {

})

app.listen(port, () => {
console.log(` app listening on port ${port}`)
})

问题原因 #

客户端用FormData对象发送请求，这种格式是multipart/form-data，而Express默认的express.urlencoded()和express.json()中间件只能处理application/x-www-form-urlencoded和application/json格式的数据，所以服务端无法解析FormData，导致req.body里的tit和contr都是undefined。另外，代码中漏了定义createDate函数，就算参数能拿到，这里也会报错。

解决方案 #

方案一：改用urlencoded格式发送请求（无需额外安装依赖） #

修改客户端提交代码，将FormData转为URL编码格式并设置对应请求头：

document.getElementById('kontaktFormular').addEventListener('submit', async (event) => {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    // 将FormData转为urlencoded格式
    const urlEncodedData = new URLSearchParams(formData);

    const response = await fetch(event.currentTarget.action, {
        method: 'POST',
        body: urlEncodedData,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });

    const updatedEntries = await response.json();
    updateEntries(); // 原函数无需参数，修正调用方式
});

方案二：服务端安装multer处理FormData #

1. 安装multer依赖：

npm install multer

2. 修改服务端代码，添加multer中间件并补充createDate函数：

const express = require('express');
const app = express();
const path = require('path');
const port = 8000;
const multer = require('multer');
const upload = multer(); // 无需存储文件，使用默认配置

app.use(express.urlencoded({extended: false}));
app.use(express.static('.'));
app.use(express.json());

app.get('/forum/beitrag', (req, res) => {
    res.send(entryData);
    console.log("posted");
});

let entryData = [
    {datum: "10.Juni.2023", thema: "mein beitrag", beitrag: "digga warum geht das nicht"}];

// 添加multer的none()中间件处理不带文件的FormData
app.post('/forum/beitrag', upload.none(), (req, res) => {
    const { tit, contr } = req.body;
    console.log({ tit, contr });
    const newEntry = {datum: createDate(), thema: tit, beitrag: contr};

    entryData.push(newEntry);
    res.json(entryData);
});

// 补充createDate函数
function createDate() {
    const now = new Date();
    const day = now.getDate();
    const month = now.toLocaleString('de-DE', { month: 'long' });
    const year = now.getFullYear();
    return `${day}.${month}.${year}`;
}

app.get('/logout', (req, res) => {})

app.listen(port, () => {
console.log(` app listening on port ${port}`)
})

额外修复 #

原客户端代码中updateEntries(updatedEntries)调用错误，函数定义无需参数，应改为updateEntries()，使其重新从服务端拉取最新数据。

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