问题描述
我正在使用express，mongodb，multer，ejs和croppiejs来上传患者照片.用户上传照片时，他们可以选择裁剪照片.我将裁剪后的照片保存为一个名为 croppedPhoto 的字段中的BLOB对象.
现在，我想在前端显示该裁剪的照片.我正在传递患者对象(该对象包含记录的所有数据字段，包括裁剪后的照片).
我正在考虑将该blob对象转换为base64并显示它.但是问题是我不确定如何在ejs模板中使用 croppedPhoto 字段值进行转换.
server.js [查找所有患者并传递到ejs模板-还包括cropedPhoto字段]
app.get('/', async (req, res) => {
const patients = await Patient.find();
res.render('index', { patients: patients });
});
index.ejs [想在img标签中显示照片]
<div class="flex flex-wrap mt-10">
<% patients.forEach(patient => { %>
<div
class="flex flex-col items-center justify-center h-auto lg:h-auto lg:w-32 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden">
<img src="<%= patient.croppedPhoto %>" class="my-3 w-20 h-20 rounded-full" alt="Patient Photo">
</div>
<% }) %>
</div>
谢谢！
通常，在将文件上传到服务器时，您必须避免将文件本身保存在数据库中，而是可以从文件中删除文件.客户的桌面使用快速上传文件到所需目录(存储图像的应用程序图像文件夹) ，然后将该文件的path保存在数据库中，通常情况如下:/images/test.png.
这里是一个例子:
router.route('/add').post(function (req, res) {
if (req.files && req.body.name) {
var file = req.files.file
// to move the file to the direct i want !
file.mv("client/public/img/client/categories/" + file.name, err => {
if (err) {
console.error(err);
return res.status(500).send(err);
}
});
var newCategorie = new Categorie({
name: req.body.name,
imgUrl: "/img/client/categories/" + file.name // TO SAVE THE PATH
});
}
newCategorie
.save()
.then(categories => res.json(categories))
.catch(err => res.status(400).json('Error: ' + err));
} else {
res.status(400).json({ msg: "Please enter all fields" });
}
});
然后在您的EJS模板中，访问图像的src非常容易:<img src="OBJECT.ImgURL" />
I am working on patient photo upload using express, mongodb, multer, ejs, and croppiejs. When user uploads a photo they have an option to crop it. I am saving the cropped photo in a collection as BLOB object in a field called croppedPhoto.
Now, i want to display that cropped photo on front-end. I am passing the patients object (which contains all the data fields of a record including cropped photo).
I am thinking of converting that blob object to base64 and display it. But the issue is I am not sure how to use croppedPhoto field value in ejs template to convert it.
server.js [Finding all patients and passing in to ejs template - includes croppedPhoto field as well]
app.get('/', async (req, res) => {
const patients = await Patient.find();
res.render('index', { patients: patients });
});
index.ejs [want to display the photo in img tag]
<div class="flex flex-wrap mt-10">
<% patients.forEach(patient => { %>
<div
class="flex flex-col items-center justify-center h-auto lg:h-auto lg:w-32 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden">
<img src="<%= patient.croppedPhoto %>" class="my-3 w-20 h-20 rounded-full" alt="Patient Photo">
</div>
<% }) %>
</div>
Thanks!!
Usually and when it comes to uploading files to the server, you have to avoid saving the file itself in the database, instead, you can move the file from the client's desktop to the directory you want (your application images folder where you store the images) using Express file upload , and you save the path of that file in the database, normally it would be something like this : /images/test.png .
Here is an example :
router.route('/add').post(function (req, res) {
if (req.files && req.body.name) {
var file = req.files.file
// to move the file to the direct i want !
file.mv("client/public/img/client/categories/" + file.name, err => {
if (err) {
console.error(err);
return res.status(500).send(err);
}
});
var newCategorie = new Categorie({
name: req.body.name,
imgUrl: "/img/client/categories/" + file.name // TO SAVE THE PATH
});
}
newCategorie
.save()
.then(categories => res.json(categories))
.catch(err => res.status(400).json('Error: ' + err));
} else {
res.status(400).json({ msg: "Please enter all fields" });
}
});
Then in your EJS template, it would be very easy to access the src of the image : <img src="OBJECT.ImgURL" />
这篇关于如何在EJS模板中转换Blob对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！