使用Node.js制作图片上传服务的详细教程

时间：2025-07-21 10:19:44|栏目：JavaScript|点击：次

准备工作

搭建 Express 服务器

配置 multer 进行图片上传

处理图片上传请求

完整代码示例

测试图片上传服务

准备工作

我们将使用 Express 框架来搭建 Web 服务器，并借助 multer 中间件处理文件上传。首先，确保你已经安装了 Node.js 和 npm。然后，创建一个新的项目目录，并在该目录下初始化一个新的 Node.js 项目：

mkdir image-upload-service
cd image-upload-service
npm init -y

接着，安装 Express 和 multer：

1	`npm` `install` `express multer`

搭建 Express 服务器

在项目目录中创建一个app.js文件，开始编写 Express 服务器代码：

const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
    res.send('图片上传服务');
});
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

此时，运行node app.js，在浏览器中访问http://localhost:3000，应该能看到 “图片上传服务” 的提示。

配置 multer 进行图片上传

multer 是一个用于处理multipart/form-data类型表单数据的中间件，非常适合处理文件上传。在app.js中配置 multer：

const multer = require('multer');
// 配置multer存储引擎，这里使用本地存储
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/'); // 上传文件存储目录
    },
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop()); // 生成唯一文件名
    }
});
const upload = multer({ storage: storage });

上述代码中，我们定义了一个本地存储引擎，将上传的图片存储在uploads/目录下，并为每个上传的文件生成一个唯一的文件名。

处理图片上传请求

接下来，添加一个路由来处理图片上传请求：

app.post('/upload', upload.single('image'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('没有选择要上传的文件');
    }
    res.send('文件上传成功');
});

这里使用upload.single('image')中间件来处理单个名为image的文件上传。如果没有文件被选中，返回 400 状态码。

完整代码示例

以下是完整的app.js代码：

const express = require('express');
const app = express();
const port = 3000;
const multer = require('multer');
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop());
    }
});
const upload = multer({ storage: storage });
app.get('/', (req, res) => {
    res.send('图片上传服务');
});
app.post('/upload', upload.single('image'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('没有选择要上传的文件');
    }
    res.send('文件上传成功');
});
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

测试图片上传服务

你可以使用 Postman 或编写一个简单的 HTML 表单来测试这个图片上传服务。例如，创建一个index.html文件：

<!DOCTYPE html>
<html>
<body>
    <h2>上传图片</h2>
    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="image">
        <input type="submit" value="上传">
    </form>
</body>
</html>

在浏览器中打开index.html，选择一张图片并点击上传，应该能看到 “文件上传成功” 的提示，并且在uploads/目录下会生成上传的图片文件。

通过以上步骤，我们成功地在 Node.js 中搭建了一个图片上传服务。你可以根据实际需求进一步扩展和优化这个服务，例如添加文件大小限制、图片格式校验等功能。希望本文能帮助你在项目中顺利实现图片上传功能。

上一篇：vue3整合SpringSecurity加JWT实现权限校验

栏目：JavaScript

下一篇：前端JavaScript数组方法总结(非常详细!)

本文标题：使用Node.js制作图片上传服务的详细教程

本文地址：https://fushidao.cc/wangluobiancheng/23726.html

更多JavaScript

JavaScript

使用Node.js制作图片上传服务的详细教程

准备工作

搭建 Express 服务器

配置 multer 进行图片上传

处理图片上传请求

完整代码示例

测试图片上传服务

您可能感兴趣的文章

阅读排行

推荐教程