本教程详细介绍了如何在 node.js 环境下，利用 express 框架和 `express-fileupload` 中间件，实现从 html `` 标签上传图片文件并将其存储到服务器本地文件系统的完整流程。文章涵盖了前端表单配置、后端中间件集成、文件接收与存储，并提供了示例代码和注意事项，旨在帮助开发者高效、安全地处理文件上传任务。
在 Web 应用开发中，用户上传文件（如图片、文档等）是一个常见需求。然而，直接使用 Node.js 的 fs.writeFile 结合 Express 的 req.body 来处理文件上传通常会导致问题，因为 req.body 默认情况下只会解析表单中的文本字段，对于文件上传，它只会获取到文件的名称而非实际的二进制数据。为了正确地接收和存储用户上传的文件，我们需要采取特定的前端配置和后端处理机制。
前端表单配置
要确保浏览器能够正确地将文件数据发送到服务器，HTML <form> 标签必须设置 enctype="multipart/form-data" 属性。这个属性告诉浏览器，表单数据将以多部分编码的形式发送，其中包括文件内容。
<form action="/dish/new" method="POST" enctype="multipart/form-data">
<input
type="file"
name="thumbnail"
id="image-input"
accept="image/png, image/jpg, image/jpeg"
/>
<input type="text" name="name" placeholder="Dish Name" />
<input type="submit" value="Upload Dish" />
</form>在上述代码中，name="thumbnail" 是文件输入字段的名称，服务器将通过这个名称来识别上传的文件。
后端中间件设置
在 Node.js 服务器端，我们需要一个专门的中间件来解析 multipart/form-data 类型的请求体，并提取出上传的文件。express-fileupload 是一个流行且易于使用的中间件，它能够很好地完成这项工作。
立即学习“前端免费学习笔记（深入）”；
1. 安装 express-fileupload
首先，通过 npm 安装 express-fileupload：
npm install express-fileupload
2. 注册中间件
在你的 Express 应用主文件（如 app.js 或 server.js）中，引入并注册 express-fileupload 中间件。
const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
// 注册 express-fileupload 中间件
// 默认情况下，文件将存储在内存中。如果需要更大的文件，可以配置 tempFileDir 选项。
app.use(fileUpload({
// 可选配置项
// useTempFiles : true,
// tempFileDir : '/tmp/'
}));
// 其他 Express 中间件和路由
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// 假设你的路由文件在 routes/dish.js
const dishRoutes = require('./routes/dish');
app.use('/dish', dishRoutes);
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});处理文件上传路由
注册 express-fileupload 中间件后，所有上传的文件都将通过 req.files 对象访问。req.files 是一个对象，其键是前端 <input type="file"> 标签的 name 属性值。
const express = require('express');
const router = express.Router();
const path = require('path'); // 用于处理文件路径
router.post('/new', async (req, res) => {
// 检查是否有文件上传
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('没有文件被上传。');
}
// 获取上传的文件，这里的 'thumbnail' 对应前端 input 的 name 属性
let thumbnail = req.files.thumbnail;
// 确保目标目录存在，如果不存在则创建
const uploadDir = path.join(__dirname, '../public/images/dishes');
// 注意：在生产环境中，你可能需要一个更健壮的目录创建和权限管理方案
// 例如：fs.mkdirSync(uploadDir, { recursive: true });
// 生成一个唯一的文件名以避免覆盖
const fileName = `${Date.now()}-${thumbnail.name}`;
const uploadPath = path.join(uploadDir, fileName);
// 使用 mv() 方法将文件移动到服务器上的指定位置
thumbnail.mv(uploadPath, (err) => {
if (err) {
console.error('文件移动失败:', err);
return res.status(500).send(err);
}
console.log(`文件 '${fileName}' 已成功存储到 '${uploadPath}'`);
// 文件成功上传后，可以进行其他数据库操作或重定向
res.redirect('/success'); // 或返回 JSON 响应
});
});
module.exports = router;注意事项与最佳实践
- 文件命名: 强烈建议为上传的文件生成唯一的名称（例如，使用时间戳、UUID 或哈希值），以防止文件名冲突和覆盖现有文件。
- 目标目录: 确保文件上传的目标目录存在。在生产环境中，可能需要使用 fs.mkdirSync(dir, { recursive: true }) 来确保目录存在。同时，要确保 Node.js 进程对该目录具有写入权限。
- 文件类型与大小验证: 在服务器端对上传的文件进行类型（thumbnail.mimetype）和大小（thumbnail.size）验证是至关重要的，以防止恶意文件上传和服务器资源滥用。express-fileupload 提供了 limits 选项来配置文件大小限制。
- 错误处理: 始终包含健壮的错误处理机制，以应对文件上传失败、移动失败等情况。
-
安全性:
- 路径遍历攻击: 永远不要直接使用用户提供的文件名来构建文件路径，始终进行净化或生成新的唯一文件名。
- 文件内容检查: 对于关键应用，除了检查文件扩展名和 MIME 类型，可能还需要更深层次的内容分析，以防止上传恶意可执行文件。
- 存储位置: 不要将用户上传的文件直接存储在 Web 可访问的根目录下，除非它们是静态资源（如图片）。对于敏感文件，应存储在 Web 根目录之外，并通过服务器端逻辑进行访问控制。
- 异步操作: 文件上传和移动是异步操作。确保你的代码正确处理回调或使用 async/await 来管理这些异步流程。
通过遵循上述步骤和最佳实践，你可以安全、高效地在 Node.js 应用中实现文件上传功能，并将用户上传的图片文件存储到服务器的本地文件系统。
