准备工作
我们将使用 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图片上传服务的资料请关注代码网其它相关文章!
发表评论