在前端开发的过程中，文件上传是一个常见的需求。Express.js 是一个轻量的 Node.js 框架，而 Multer 是上传文件的中间件之一。本文将详细介绍如何使用 Express.js 和 Multer 实现文件上传。
准备工作
在开始之前，请确保已经在本地安装了 Node.js，以及 Express.js 和 Multer 库。可以通过以下命令来安装：
npm install express --save npm install multer --save
文件上传原理
在网页上进行文件上传，主要是通过 HTTP 协议的 POST 方法实现。上传文件时，浏览器会将文件数据封装成一个 FormData 对象，然后将这个对象作为请求体发送到服务器。服务器接收到请求后，可以通过解析请求体中的数据来获得文件信息。
文件上传实现
以下是文件上传的实现步骤：
- 创建 Express.js 应用程序
- 安装 Multer 中间件
- 设置 Multer 中间件
- 处理上传的文件
1. 创建 Express.js 应用程序
首先，需要在本地创建一个 Express.js 应用程序。可以按照以下步骤进行创建：
- 创建一个空文件夹
- 在该文件夹中打开终端窗口，运行以下命令：
npm init
这个命令将会通过交互式命令行来生成一个 package.json 文件，用于管理项目的依赖和其他配置。
- 安装 Express.js 库：
npm install express --save
- 创建一个名为 server.js 的文件，并在其中编写以下代码：
const express = require('express')
const app = express()
app.listen(3000, () => {
console.log('Server running on port 3000')
})- 在终端窗口中运行以下命令：
node server.js
这个命令将启动一个本地服务器，监听在 3000 端口上。现在在浏览器中打开 http://localhost:3000/ 就可以访问服务器了。
2. 安装 Multer 中间件
在 server.js 中，需要引入 Multer 中间件。可以通过以下命令安装 Multer：
npm install multer --save
3. 设置 Multer 中间件
在 Express.js 中，可以使用 app.use() 函数来设置中间件。以下是设置 Multer 中间件的代码示例：
// javascriptcn.com 代码示例
const multer = require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
const upload = multer({ storage: storage })上面的代码中，创建了一个对象 storage，用于设置上传的文件的存储位置和文件名。在这里，上传的文件将会保存在 uploads 文件夹中，并且文件名将设置为字段名和当前时间的组合。
upload 是一个 Multer 中间件实例，用于处理请求体中的文件数据。可以通过以下代码将该实例添加到应用程序中：
app.use(upload.any())
这里使用了 any() 函数，表示可以上传任意类型的文件。还可以引入其他函数，如 single()、array() 和 fields()，以限制上传的文件类型和数量。
4. 处理上传的文件
Multer 中间件的处理过程会将上传的文件保存到指定的位置，并在请求对象中添加一个 files 属性，来存储上传的文件对象。可以通过以下代码获取上传的文件信息：
app.post('/upload', (req, res) => {
console.log(req.files)
res.send('File uploaded!')
})上述代码中，当服务器接收到上传文件的 POST 请求时，会执行回调函数。回调函数中使用了 req.files 属性来获取上传的文件信息，并且通过 res.send() 函数来返回一个成功上传的消息。
示例代码
完整的示例代码如下：
// javascriptcn.com 代码示例
const express = require('express')
const multer = require('multer')
const app = express()
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
const upload = multer({ storage: storage })
app.use(upload.any())
app.post('/upload', (req, res) => {
console.log(req.files)
res.send('File uploaded!')
})
app.listen(3000, () => {
console.log('Server running on port 3000')
})在浏览器中访问 http://localhost:3000/，选择一个文件上传即可。
总结
本文介绍了如何使用 Express.js 和 Multer 实现文件上传。在实践中，需要注意保护上传的文件，防止上传恶意文件、限制上传的文件大小及类型等。同时，还可以使用其他的 Node.js 模块来实现文件上传，如 formidable、busboy 等。希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b598f7d4982a6eb53a05c