在NodeJS中保存和显示用Multer软件包保存的图片,可以按照以下步骤进行操作:
npm install multer
const express = require('express');
const multer = require('multer');
const path = require('path');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/'); // 上传文件保存的目录
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)); // 上传文件保存的文件名
}
});
const upload = multer({ storage: storage });
const app = express();
app.post('/upload', upload.single('image'), function (req, res, next) {
// 文件上传成功后的处理逻辑
res.send('File uploaded successfully.');
});
上述代码中,/upload
是文件上传的接口路径,image
是前端表单中文件上传字段的名称。
<form>
元素创建一个文件上传表单:
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload">
</form>
上述代码中,/upload
是文件上传的接口路径,image
是文件上传字段的名称,需要与Node.js路由中的字段名称保持一致。
app.get('/image/:filename', function (req, res) {
const filename = req.params.filename;
res.sendFile(path.join(__dirname, 'uploads', filename));
});
上述代码中,/image/:filename
是用于显示图片的接口路径,:filename
是图片文件名的参数。
<img>
标签来显示上传的图片:
<img src="/image/filename.jpg" alt="Uploaded Image">
上述代码中,/image/filename.jpg
是图片的URL,需要将filename.jpg
替换为实际上传的图片文件名。
以上步骤完成后,用户可以通过前端页面选择并上传图片,图片将保存在指定的目录中。用户还可以通过访问图片的URL来显示上传的图片。
腾讯云相关产品推荐:
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行。
领取专属 10元无门槛券
手把手带您无忧上云