存储用户上传图片到服务器的Node.js教程-html教程-PHP中文网

存储用户上传图片到服务器的Node.js教程

碧海醫心

发布： 2025-12-05 11:44:02

原创

472人浏览过

存储用户上传图片到服务器的Node.js教程

本教程详细介绍了如何在node.js express应用中处理html文件输入并将其存储到服务器本地。核心方法包括在前端使用`enctype="multipart/form-data"`属性确保文件数据正确发送，以及在后端利用`express-fileupload`中间件解析上传的文件，并通过其提供的`mv()`方法安全高效地将文件移动到服务器指定目录，从而实现完整的图片上传和存储流程。

1. 理解文件上传机制

在Web开发中，处理用户上传的文件（如图片）与处理普通表单数据有所不同。传统的application/x-www-form-urlencoded或application/json 编码方式不适用于二进制文件数据。为了正确传输文件，我们需要采取特定的前端和后端配置。

2. 前端HTML表单配置

要允许用户上传文件，HTML

标签必须设置 enctype="multipart/form-data" 属性。这个属性告诉浏览器将表单数据编码为一系列部分，其中每个部分代表一个表单字段或一个文件。

以下是一个简单的HTML表单示例，用于上传图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
</head>
<body>
    <h1>上传新菜品图片</h1>
    <form action="/dish/new" method="POST" enctype="multipart/form-data">
        <label for="name">菜品名称:</label>
        <input type="text" name="name" id="name" required><br><br>

        <label for="desc">菜品描述:</label>
        <textarea name="desc" id="desc"></textarea><br><br>

        <label for="cost">价格:</label>
        <input type="number" name="cost" id="cost" required><br><br>

        <label for="isnonveg">是否非素:</label>
        <input type="checkbox" name="isnonveg" id="isnonveg"><br><br>

        <label for="image-input">选择图片:</label>
        <input
            type="file"
            name="thumbnail"
            id="image-input"
            accept="image/png, image/jpg, image/jpeg"
            required
        /><br><br>

        <button type="submit">提交</button>
    </form>
</body>
</html>

登录后复制

关键点：

enctype="multipart/form-data"：这是处理文件上传的必需属性。
input type="file"：用于选择文件的输入字段。
name="thumbnail"：这个name属性在后端用于识别上传的文件。
accept="image/png, image/jpg, image/jpeg"：限制用户只能选择指定类型的图片文件。

3. 后端Node.js Express配置

在Node.js Express应用中，默认的req.body对象只能解析普通的文本表单数据，无法直接处理multipart/form-data编码的文件内容。为了解析上传的文件，我们需要使用一个专门的中间件。express-fileupload是一个常用且功能强大的选择。

3.1 安装 express-fileupload

首先，在你的项目中安装 express-fileupload：

畅图

AI可视化工具

179

查看详情

npm install express-fileupload

登录后复制

3.2 集成 express-fileupload 中间件

在你的Express应用主文件（通常是app.js或server.js）中，引入并注册express-fileupload中间件。

const express = require('express');
const fileupload = require('express-fileupload'); // 引入 express-fileupload
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 配置 Express 中间件
app.use(express.json()); // 用于解析 JSON 格式的请求体
app.use(express.urlencoded({ extended: true })); // 用于解析 URL-encoded 格式的请求体

// 注册 express-fileupload 中间件
// 可以传入配置对象，例如限制文件大小、允许的扩展名等
app.use(fileupload({
    limits: { fileSize: 50 * 1024 * 1024 }, // 限制文件大小为 50MB
    abortOnLimit: true, // 达到限制时中止请求
    useTempFiles: true, // 使用临时文件存储上传的文件
    tempFileDir: '/tmp/' // 临时文件存放目录
}));

// 静态文件服务 (如果需要访问上传的图片)
app.use('/public', express.static(path.join(__dirname, 'public')));

// 启动服务器
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

// ... 其他路由定义

登录后复制

3.3 处理文件上传路由

在你的路由文件中，你可以通过 req.files 对象访问上传的文件。req.files 是一个对象，其键是你在前端HTML input type="file" 标签中定义的 name 属性（例如 thumbnail）。

const express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs'); // 用于检查目录是否存在

// 确保目标目录存在
const uploadDir = path.join(__dirname, '../public/images/dishes');
if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true });
}

router.post('/dish/new', async (req, res) => {
    try {
        // 获取普通表单字段
        let { name, desc, cost, isnonveg } = req.body;
        isnonveg = isnonveg === 'on' ? true : false; // 处理checkbox值

        // 检查是否有文件上传
        if (!req.files || Object.keys(req.files).length === 0) {
            return res.status(400).send('没有上传文件。');
        }

        // 获取上传的文件，`thumbnail` 是前端 input 标签的 name 属性
        let uploadedImage = req.files.thumbnail;

        // 生成唯一的文件名，以避免覆盖现有文件
        const uniqueFileName = `${Date.now()}-${uploadedImage.name}`;
        const targetPath = path.join(uploadDir, uniqueFileName);

        // 使用 mv() 方法将文件从临时位置移动到目标位置
        uploadedImage.mv(targetPath, (err) => {
            if (err) {
                console.error('文件移动失败:', err);
                return res.status(500).send(err);
            }

            console.log(`图片 '${uniqueFileName}' 已成功存储到: ${targetPath}`);
            // 在这里你可以将图片路径保存到数据库，或者进行其他业务逻辑
            // 例如：保存 `uniqueFileName` 到数据库的 `dish` 记录中

            res.redirect('/success'); // 上传成功后重定向到其他页面
        });

    } catch (error) {
        console.error('处理文件上传时发生错误:', error);
        res.status(500).send('服务器内部错误。');
    }
});

// 示例成功页面路由
router.get('/success', (req, res) => {
    res.send('图片上传成功！');
});

module.exports = router;

登录后复制

关键点：

req.files.thumbnail：express-fileupload会将上传的文件信息放在 req.files 对象中，thumbnail 对应前端 input 标签的 name 属性。
uploadedImage.mv(targetPath, callback)：这是 express-fileupload 提供的核心方法，用于将上传的文件从其临时位置移动到服务器上的指定路径。它是一个异步操作，需要一个回调函数来处理成功或失败。
uniqueFileName：为了避免文件名冲突，建议为上传的文件生成一个唯一的名称（例如，结合时间戳和原始文件名）。
fs.mkdirSync(uploadDir, { recursive: true })：在尝试保存文件之前，确保目标目录存在。如果不存在，则创建它。

4. 注意事项与最佳实践

文件命名： 务必为上传的文件生成唯一的名称，以防止文件覆盖和安全问题。可以使用 UUID 或时间戳结合原始文件名。
文件类型验证： 除了前端的 accept 属性，后端也应该进行文件类型验证，防止恶意用户上传可执行文件或其他非法文件。可以检查 uploadedImage.mimetype。
文件大小限制： 在 express-fileupload 配置中设置 limits 属性，限制上传文件的大小，防止服务器资源耗尽。
错误处理： 对文件移动操作进行健壮的错误处理，及时向用户反馈问题。
目录权限： 确保服务器上的目标存储目录具有写入权限。
安全性： 不要将用户上传的文件直接暴露在Web服务器的根目录。最好将它们存储在应用程序目录之外，并通过特定的路由进行访问，或者进行CDN分发。
异步操作： 文件上传和移动是异步操作，确保你的代码能够正确处理回调或使用 async/await 结构。

总结

通过上述步骤，你已经学会了如何在Node.js Express应用中实现文件上传功能。核心流程包括：在HTML表单中设置 enctype="multipart/form-data"，在后端使用 express-fileupload 中间件解析文件，并通过其 mv() 方法将文件安全地存储到服务器的指定目录。结合适当的文件命名、类型验证和错误处理，可以构建一个稳定可靠的文件上传系统。

以上就是存储用户上传图片到服务器的Node.js教程的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何在特定React路由下为HTML和Body应用全屏布局样式利用 CSS Grid 实现复杂不规则布局：告别传统表格限制 eclipse怎么运行html项目_eclipse运行html项目步骤【指南】怎么使浏览器运行html显示出来的_让浏览器显html运行结果【教程】使用JavaScript通过事件委托和数据集属性实现动态内容更新