使用Node.js制作图片上传服务的详细教程
准备工作
我们将使用 Express 框架来搭建 Web 服务器，并借助 multer 中间件处理文件上传。首先，确保你已经安装了 Node.js 和 npm。然后，创建一个新的项目目录，并在该目录下初始化一个新的 Node.js 项目：
mkdir image-upload-service cd image-upload-service npm init -y
接着，安装 Express 和 multer：
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 中搭建了一个图片上传服务。你可以根据实际需求进一步扩展和优化这个服务，例如添加文件大小限制、图片格式校验等功能。希望本文能帮助你在项目中顺利实现图片上传功能。
以上就是使用Node.js制作图片上传服务的详细教程的详细内容，更多关于Node.js图片上传服务的资料请关注脚本之家其它相关文章！
相关文章
npm does not support Node.js问题的解决办法
这篇文章主要给大家介绍了关于npm does not support Node.js问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
Node.js 是一个基于 Chrome V8 JavaScript 引擎 构建的开源、跨平台运行时环境,这篇文章主要介绍了NodeJS的使用与NPM包管理器,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了如何让node运行es6模块文件及其原理详解，详细的介绍了2种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要给大家简单介绍了关于node.js中的http模块和url模块，文中通过示例代码介绍的非常详细，对大家学习或者使用node.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-10-10
本文给大家介绍了nodejs 连接Mysql相关操作的示例代码，主要用到的是sql语句，都是比较基础的。2017-05-05
nodejs连接mysql数据库简单封装示例-mysql模块
本篇文章主要介绍了nodejs连接mysql数据库简单封装（mysql模块），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
npm安装淘宝镜像报错问题解决(npm install -g cnpm)
本文主要介绍了npm安装淘宝镜像报错问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要介绍了Windows下Node爬虫神器Puppeteer安装记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
在项目开发过程中,使用到vue框架技术,需要安装node下载项目依赖,本文主要介绍了nodejs版本管理工具nvm的安装与使用小结,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
Nest.js是一个渐进的Node.js框架,可以在TypeScript和JavaScript (ES6、ES7、ES8)之上构建高效、可伸缩的企业级服务器端应用程序,这篇文章主要介绍了如何优雅的书写NestJS服务配置的相关资料,需要的朋友可以参考下2026-04-04
最新评论