在 web 开发中，表单是一种常见的用户交互方式。Express.js 是一个流行的 Node.js 框架，提供了简单而强大的工具来处理表单提交、文件上传和验证等任务。本文将介绍如何使用 Express.js 进行表单处理，并涵盖上传文件、处理请求体和验证。
环境准备
在开始之前，需要确保已安装 Node.js 和 Express.js。如果未安装，请按照官方文档的指导进行安装。
安装所需的依赖
为了能够处理表单，我们需要安装一些额外的库。在项目根目录下执行以下命令：
npm install multer express-validator
multer是一个用于处理文件上传的中间件。express-validator是一个用于验证表单输入的中间件。
创建 Express.js 应用
首先，创建一个新的目录，在该目录中执行以下命令以初始化一个新的 Express.js 应用：
npm init -y
接下来，在项目根目录下创建一个名为 app.js 的文件，并在其中添加以下代码：
const express = require('express');
const multer = require('multer');
const { body, validationResult } = require('express-validator');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
res.render('index');
});
app.post('/upload', upload.single('file'), (req, res) => {
const file = req.file;
res.send(`File uploaded: ${file.filename}`);
});
app.post('/submit', [
body('name').notEmpty().withMessage('Name is required'),
body('email').isEmail().withMessage('Invalid email address'),
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
res.send('Form submitted successfully');
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});
在这段代码中，我们设置了 Express.js 应用，引入了所需的依赖，并创建一个名为 upload 的 Multer 实例。
我们使用了两个路由来处理表单：/upload 路由处理文件上传，/submit 路由处理表单提交。
/upload 路由使用 upload.single() 方法来处理单个文件上传，并将上传的文件保存到 uploads/ 目录下。我们通过 req.file 获取上传的文件对象，并在响应中返回文件名。
/submit 路由使用 express-validator 中间件对表单数据进行验证。我们使用 body() 方法来对请求体的字段进行验证，notEmpty() 要求字段不能为空，isEmail() 要求字段是有效的电子邮件地址。如果验证失败，我们返回带有错误数组的 400 状态码的响应，否则返回 "Form submitted successfully"。
创建前端页面
在项目根目录中，创建一个新的目录 views，并在该目录下创建一个名为 index.ejs 的文件。在该文件中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Handling with Express.js</title>
</head>
<body>
<h1>Form Handling with Express.js</h1>
<h2>Upload a File</h2>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
<h2>Submit a Form</h2>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
这段代码创建了一个两部分的表单，分别用于上传文件和提交表单。其中，enctype="multipart/form-data" 用于支持文件上传。
运行应用
在项目根目录下执行以下命令来启动 Express.js 应用：
node app.js
然后，在浏览器中访问 http://localhost:3000，即可测试表单的上传、验证功能。
总结
本文介绍了如何使用 Express.js 进行表单处理，包括文件上传、请求体处理和验证。通过使用 Multer 和 express-validator 等中间件，我们可以方便地处理各种表单需求，并提供可靠的验证机制来保证数据的准确性。希望本文对你理解 Express.js 表单处理有所帮助。
（参考链接：Express.js、Multer、express-validator）
注意：本文归作者所有，未经作者允许，不得转载
