简介
在现代化的 web 应用中，文件上传是必不可少的功能。Express.js 提供了一种简单易用的方式来实现这一功能。本文将会介绍如何在 Express.js 中实现文件上传功能，涉及到的知识点有：form 表单、multer 库、Express.js 的中间件等。
form 表单
要实现文件上传，首先需要在前端建立一个 form 表单来传递文件和其他信息。以下是一个简单的 form 表单示例：
<form action="/upload" method="post" enctype="multipart/form-data"> <input type="text" name="name" /> <input type="file" name="file" /> <button type="submit">上传</button> </form>
其中，name 是普通的文本信息，而 file 是要上传的文件。
需要注意的是，form 表单的 enctype 属性必须设置为 multipart/form-data，才能正确上传文件。
multer 库
Express.js 并没有内置文件上传的功能，但是可以使用第三方 npm 库 multer 来处理上传。multer 库可以轻松处理各种类型的数据，包括文件和文本数据。
要使用 multer 库，需要先在项目中安装它：
$ npm install multer
multer 提供了一个 multer() 函数来处理表单数据，并生成一个中间件，将上传的文件和其他信息添加到 request 对象中，使得我们可以在后续的路由中处理上传文件的逻辑。
以下是一个例子：
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.body); // 文本数据
console.log(req.file); // 上传的文件
res.send('上传成功！');
})在代码中，我们首先引入了 multer 库，并通过调用它的 multer() 函数来创建一个 multer 中间件。
upload.single('file') 中的 'file' 参数表示要上传的文件字段名称。
通过调用 upload.single('file') 函数，生成的中间件将会在请求处理流程中被调用，处理表单数据，并将 req.file 和 req.body 中的数据传递给后续的处理函数。在示例代码中，我们只是简单地打印出了上传的文件和文本数据。
细节与注意事项
- multer 中间件应该放在路由处理函数之前
- 每个上传的文件都会分配一个唯一的文件名，避免文件名冲突
- 单个上传的文件大小有默认限制，可以通过设置
limits和fileSize属性来修改
示例代码
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ---------------------------------- ------------------- ---------------------- ----- ---- -- - ---------------------- ---------------------- ------------------ --- ---------------- -- -- - ---------------------- ---
总结
在 Express.js 中实现文件上传功能需要前后端协作，使用 form 表单传递数据，使用 multer 作为中间件处理上传的数据，并进行文件名称和文件大小等细节的优化。了解这些知识点，能够让我们更加流畅地实现所需的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b096e848841e9894cae4bb