我是学习者&尝试express&mongodb首次与ejs结合。我不明白如何在前端显示ejs上传的图片。请查看以下代码，说明我的错误在哪里；基于错误提供指导。
路由器句柄代码：
addmembersroute.js
const router = require('express').Router();
const multer = require('multer');
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, './views/uploads/')
},
filename: (req, file, callback) => {
callback(null, file.fieldname + '_' + Date.now() + path.extname(file.originalname))
}
})
const upload = multer({ storage: storage });
const { createMembers } = require('../../middlewares/members/addnewmembercontroller');
router.get('/', createMembers[0]);
router.post('/', upload.single('member_img'), createMembers[1]);
createMembers控制器处理来自路由外部的post请求。
createMembers控制器代码：
addnewmembercontroller.js
const fs = require('fs');
const path = require('path');
const MembersModel = require('../../models/Members');
exports.createMembers = [(req,res,next) => {
res.render('../views/pages/members/addmembers');
next()
},
(req,res) => {
let {
member_name, member_mob, member_email ...
} = req.body;
let img = fs.readFileSync(req.file.path);
let encode_image = img.toString('base64');
if (req.body && req.file) {
const Members = new MembersModel({
name: member_name,
images: {
data: Buffer.from(encode_image, 'base64'),
contentType: req.file.mimetype
},
.
.
})
Members.save()
.then( () => {
res.render('../views/pages/members/addmembers')
})
.catch(error => {
res.json({
message: `error occured: ${error}`
})
})
}
}]
处理来自不同控制器的获取请求。
memberscontroller.js
const MembersModel = require('../../models/Members');
exports.getAllMembers = (req,res) => {
MembersModel.find()
.then(members => {
console.log(members);
res.render('../views/pages/members/allmembers', {members})
})
.catch(error => {
res.render('../views/pages/members/allmembers', {Error: `Error Occured: ${error}`})
})
}
exports.updateMembersProfile = (req,res) => {
res.send("I'm update member Profile page")
}
exports.deleteMembersProfile = (req,res) => {
res.send("I'm delete member Profile page")
}
DB集合模型：
const { Schema, model } = require('mongoose');
const MemberSchema = Schema({
name: String,
contact_no: String,
email: String,
...
images: {
data: Buffer,
contentType: String
}
})
const MembersModel = model('Member', MemberSchema);
module.exports = MembersModel;
用于数据采集表单的ejs模板：
<form action="/add-new" method="post" enctype="multipart/form-data" name="member-data-form" class="px-lg-3 px-md-3 py-3">
<div class="row">
<div class="col mb-2 mb-lg-1 mb-md-1">
<label for="member_name" class="form-label">Full name</label>
<input type="text" name="member_name" id="member_name" class="form-control"
placeholder="exm:John Doe" aria-label="member_name">
</div>
<div class="col">
<div>
<label for="member_img" class="form-label">(Attach your sharp photo)</label>
</div>
<input type="file" name="member_img" id="member_img">
</div>
</div>
....
</form>
我能够将用户的数据保存在collection&将文件保存到上传目录中。但当我想在前端显示数据时，我做不到。
此处的图像渲染结构：
<img src="member_img/<%= memberdata.images.data %> " style="width: 80px; height: auto;" class="img-fluid float-end me-2" alt="member-img">
可能是我在构建模板的图像时做得不对。
memberdata.images是一个缓冲区，您可以将其转换为base64data:URL:
<img src="data:<%=
memberdata.images.contentType
%>,base64;<%=
memberdata.images.toString("base64")
%>" ...>