使用Express.js进行表单处理:上传文件、处理请求体与验证

编程之路的点滴 2019-03-25 ⋅ 10 阅读

在 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.jsMulterexpress-validator


全部评论: 0

    我有话说: