如何将文件缓冲区转换为 <img> 标签 src?

IT技术 node.js reactjs mongodb mongoose buffer
2021-05-05 18:57:07

我正在开发一个使用 Node.js 作为后端的应用程序,并作为我的前端做出react。现在我创建了一个上传文件并将其作为缓冲区类型存储在 mongodb 中的路由。我的问题是,当我在我的 React 应用程序中收到这些数据时,如何将其转换为 html 图像标签中的源props?当我查看 mongodb 指南针时,文件属性如下所示:(非常长的字符串)

在此处输入图片说明 当我查看对象本身时,当我得到它作为响应时,它看起来像这样:(数字数组); 在此处输入图片说明

我试着用

  <img
      src={`data:${props.images[0].mimetype};base64,${props.images[0].file.data}`}
    />

但它没有用..

在此处输入图片说明

如果有人能得到答案,真的很感激!

mongoose模型:

   images: [
    {
    file: { type: Buffer },
     filename: { type: String },
    mimetype: { type: String }
   }
  ]

节点.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 });
....
2个回答

像这样将其转换为 base64string

  <img
      src={`data:${props.images[0].mimetype};base64,${Buffer.from(props.images[0].file.data).toString('base64')}`}
    />

将 dataUrl 保存为数据库中的字符串,字段类型为 mediumtext 并在检索集源时如下所示:

src='${data[i].data_url ? data[i].data_url : ''}'

这个对我有用。

其它你可能感兴趣的问题