我正在使用Node.js作为后端开发一个应用程序,并按照自己的意愿进行反应。 现在,我创建了一条路由,该路由上传文件并将其作为缓冲区类型存储在mongodb中。 我的问题是,当我在react应用程序中收到数据时,如何将其转换为html图像标签中的源道具? 当我看着mongodb罗盘时,文件属性看起来像这样:(很长的字符串)
我尝试使用
<img
src={`data:${props.images[0].mimetype};base64,${props.images[0].file.data}`}
/>
但是它不起作用。
真的很感谢,如果有人能给出答案!
猫鼬模型:
images: [
{
file: { type: Buffer },
filename: { type: String },
mimetype: { type: String }
}
]
node.js
var multer = require('multer');
var upload = multer({
limits: {
fileSize: 1000000
}
});
app.post('/upload', upload.single('file'), async (req, res) => {
try {
const file = {
file: req.file.buffer,
filename: req.file.originalname,
mimetype: req.file.mimetype
};
// console.log(req.file.buffer.toString('base64'));
const product = new Product({ ...req.body });
product.images = [file];
await product.save();
res.status(201).send({ success: true, product });
...
app.get('/api/products/:id', async (req, res) => {
try {
const product = await Product.findById({ _id: req.params.id }).populate(
'brand'
);
if (!product) {
throw new Error('Cannot find the requested product');
}
res.send({ product });
....
答案 0 :(得分:0)
像这样将其转换为base64string
<img
src={`data:${props.images[0].mimetype};base64,${Buffer.from(props.images[0].file.data).toString('base64')}`}
/>