推荐答案
// www.javascriptcn.com code example
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.use(express.urlencoded({ extended: true }));
app.post('/submit-form', upload.single('file'), (req, res) => {
const formData = req.body;
const file = req.file;
console.log('Form Data:', formData);
console.log('Uploaded File:', file);
res.send('Form submitted successfully!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});本题详细解读
1. 处理表单数据
在 Express 中，处理表单数据通常使用 express.urlencoded 中间件。这个中间件会解析 application/x-www-form-urlencoded 格式的请求体，并将其转换为 JavaScript 对象，存储在 req.body 中。
app.use(express.urlencoded({ extended: true }));extended: true允许解析嵌套的对象。
2. 处理文件上传
文件上传通常使用 multer 中间件。multer 是一个用于处理 multipart/form-data 类型的表单数据的中间件，主要用于上传文件。
首先，安装 multer：
npm install multer
然后，配置 multer 并指定文件存储的目录：
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });dest: 'uploads/'指定上传文件的存储目录。
在处理文件上传的路由中，使用 upload.single('file') 中间件来处理单个文件上传：
// www.javascriptcn.com code example
app.post('/submit-form', upload.single('file'), (req, res) => {
const formData = req.body;
const file = req.file;
console.log('Form Data:', formData);
console.log('Uploaded File:', file);
res.send('Form submitted successfully!');
});upload.single('file')表示处理名为file的单个文件上传。req.file包含上传文件的信息，如文件名、路径、大小等。
3. 综合处理
通过结合 express.urlencoded 和 multer，可以同时处理表单数据和文件上传。表单数据存储在 req.body 中，而上传的文件信息存储在 req.file 中。
4. 运行示例
将上述代码保存为一个文件（如 app.js），然后运行：
node app.js
访问 http://localhost:3000/submit-form 并提交表单，服务器将处理表单数据和文件上传，并返回成功消息。