表单提交数据存为undefined及成功提示显示异常问题求助

问题1：后端接收的表单数据全部为undefined #

你当前使用的express.urlencoded()中间件仅支持解析application/x-www-form-urlencoded格式的表单数据，但前端通过FormData提交的是multipart/form-data格式，Express默认没有内置解析该格式的能力，导致req.body为空，解构出的字段自然都是undefined。

解决步骤： #

1. 安装multer中间件（专门用于处理multipart/form-data格式，支持文本字段和文件解析）：

npm install multer

2. 在server.js中引入并配置multer（仅解析文本字段，无需处理文件上传）：

const multer = require('multer');
const upload = multer().none();

3. 修改POST路由，添加upload中间件：

app.post('/submit-form', upload, (req, res) => {
    const { fullname, phone, address, service, symptoms } = req.body;
    // 后续保存逻辑保持不变
});

问题2：页面提示文本显示异常 #

之前的提示异常大概率是因为后端无法解析数据导致报错，触发了前端的catch分支。解决第一个问题后，后端能正常返回JSON响应，前端即可正确显示提示文本。同时可以简化后端的响应写法：

res.json()方法会自动设置Content-Type: application/json; charset=utf-8，无需手动调用setHeader，修改后的响应代码如下：

// 错误场景
if (err) {
    console.error('Ошибка при сохранении данных:', err);
    res.status(500).json({ message: 'Произошла ошибка сервера' });
} else {
    res.json({ message: 'Ваши данные успешно переданы клинике.' });
}

修改后的完整server.js代码： #

const express = require('express');
const fs = require('fs');
const path = require('path');
const multer = require('multer');
const app = express();
const port = 1338;

const upload = multer().none();
app.use(express.static(__dirname + '/public'));

app.post('/submit-form', upload, (req, res) => {
    const { fullname, phone, address, service, symptoms } = req.body;
    const dataToSave = `${fullname}\t${phone}\t${address}\t${service}\t${symptoms}\n`;

    const submissionsDir = path.join(__dirname, 'submissions');
    const filePath = path.join(submissionsDir, 'submissions.txt');

    if (!fs.existsSync(submissionsDir)) {
        fs.mkdirSync(submissionsDir);
    }

    fs.appendFile(filePath, dataToSave, 'utf8', (err) => {
        if (err) {
            console.error('Ошибка при сохранении данных:', err);
            res.status(500).json({ message: 'Произошла ошибка сервера' });
        } else {
            res.json({ message: 'Ваши данные успешно переданы клинике.' });
        }
    });
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

额外注意： #

前端代码无需修改，fetch提交FormData时不要手动设置Content-Type，浏览器会自动添加包含boundary参数的正确multipart/form-data请求头，手动设置反而会导致解析失败。

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