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

2023-12-06

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

enter image description here When I look at the object itself when I get it as a response is looks like this:(array of numbers); enter image description here

我尝试使用

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

但它没有用..

enter image description here

如果有人能给出答案,真的很感激!

猫鼬模型:

   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 });
....

像这样将其转换为 base64string

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将文件缓冲区转换为 标签 src? 的相关文章

随机推荐

  • 当 glob 以斜杠结尾时,如何防止 pathlib 的 Path.glob 返回文件?

    新的Path glob from pathlib似乎行为与旧的不同glob glob当 glob 模式以斜杠结尾时 In 1 from pathlib import Path In 2 from glob import glob In 3
  • Selenium Webdriver - NoSuchElementExceptions

    我正在将 python 单元测试库 unittest 与 selenium webdriver 一起使用 我试图通过名称找到一个元素 大约一半的情况下 测试会抛出 NoSuchElementException 而另一些情况下则不会抛出异常
  • 如何在 postgres 中选择日期范围?

    我在 postgres 数据库中有一个时间戳字段 我想选择上个月内发生的所有日期 所以类似于 select from table where timestamp gt 当前时间戳 1 个月 select from table where t
  • 可以向 YouTube iframe 添加 onclick 事件吗?

    我有一个带有 HTML5 音频播放器和嵌入式 YouTube 音乐视频的网站 我想做到这一点 当用户点击 YouTube 视频来播放时 音乐就会停止 将 iframe 包裹起来 div YT stuff div 适用于 iframe 外部的
  • 使用 preg_replace 替换字符,除非前面有转义字符

    我正在尝试执行以下操作 希望有一位 reg ex 专家能够提供一些启示 我需要替换代码中的字符 并将其设为 但在某些情况下 需要保持 而不是改变 所以我认为我需要使用 preg replace string 具有合适的正则表达式的函数将导致
  • 使用 Devise Rails 实现用户和管理员之间的唯一 ID

    我已经使用本教程中的选项 1 安装了 Devise 并创建了用户和管理员https github com plataformatec devise wiki How To 添加管理员角色 现在我需要一点帮助 添加管理员时 它会创建一个不同的
  • Angular 不发送 Cookie

    我的角度11 http localhost 4200 现在正在与我的节点 API 服务器 http localhost 3000 通信 API 服务器在 cookie 中发回 sessionID 但后续浏览器对 API 的请求不会附带 co
  • Java内部类和静态嵌套类

    Java 中内部类和静态嵌套类的主要区别是什么 设计 实施在选择其中之一时发挥作用吗 来自Java教程 嵌套类分为两类 静态类和非静态类 声明为静态的嵌套类简称为静态嵌套类 非静态嵌套类称为内部类 使用封闭类名访问静态嵌套类 OuterCl
  • 如何使用服务器端加密将spark rdd写入S3

    我正在尝试使用服务器端加密将 RDD 写入 S3 中 以下是我的一段代码 val sparkConf new SparkConf setMaster local setAppName aws encryption val sc new Sp
  • Gulp - 按文件夹编译sass,并修改父目录

    我是 gulpfile 的新手 我不知道如何使用单个任务迭代多个文件夹 我的 src 文件夹结构 folder1 assets style scss folder2 assets style scss folder3 subfolder1
  • asp mvc 列出具有动态变化规格的电子商务产品

    我正在尝试为电子商务网站开发产品详细信息页面 假设我们在视图中列出一些产品 现在当用户单击产品时 他会进入产品详细信息视图以显示产品规格 包括添加到购物车 评论等 但这里是产品每个产品的规格都会动态变化 example 服装产品 Size
  • 使用python读取middlebury'flow'文件(字节数组和numpy)

    我正在尝试将 flo 文件读取为 numpy 2Channels 图像 格式描述如下 flo file format used for optical flow evaluation Stores 2 band float image fo
  • 为什么 java 中的操作赋值运算符类型不安全?

    我不确定这个问题是否表述清楚 但举个例子会更清楚 我发现这在 Java 中不起作用 int a a 5 0 但这将 int a a 5 0 即 看起来 运算符是类型安全的 但 不是 这是否有任何深层原因 或者这只是语言设计者必须做出的另一个
  • libGdx 如何使用图像或演员作为主体

    我浏览了 libGdx wiki 教程 但没有找到使用图像或演员作为物理体的示例 在我的游戏中 我在舞台上添加了一名演员 但我想添加这个演员或精灵图像作为物理体 我必须拖动这个演员 甚至想要检测与其他物体的碰撞 如果有请给我参考 Thank
  • 修改shell脚本来监控/ping多个ip地址

    好吧 所以我需要不断监控多个路由器和计算机 以确保它们保持在线 我找到了一个很棒的剧本here如果无法 ping 通单个 IP 它将通过咆哮通知我 这样我就可以在手机上收到即时通知 我一直在尝试修改脚本以 ping 多个地址 但运气不佳 当
  • 执行从 Xib 到 ViewController 的 segue

    我有一个带有按钮的 Xib 文件 单击按钮时我想转到另一个视图控制器 我已经在 StoryBoard 中的视图控制器之间创建了一个 Segue 并创建了一个标识符 但似乎无法以编程方式调用它 IBAction func buttonActi
  • Log4j |更新Appender的日志级别

    我的 log4j properties 文件 log4j rootLogger INFO stdout console output appender log4j appender stdout org apache log4j Conso
  • pandas“DataFrame”对象没有属性“map”

    我有两个 df df a 和 df b df a number cur code 1000 USD 700 2000 USD 800 3000 USD 900 df b number amount deletion code 1000 0
  • 在链接器方法之外将元素的文本存储在 Cypress 中

    如何存储 div 的文本值一次并在整个 cypress 测试中使用它 到目前为止 我已经通过将大部分测试逻辑嵌套在调用中来做到这一点then方法 但这看起来并不优雅或理想 cy get div then div gt let storedV
  • 如何将文件缓冲区转换为 标签 src?

    我正在开发一个应用程序 使用 Node js 作为后端 并作为我的前端进行反应 现在我创建了一个上传文件并将其作为缓冲区类型存储在 mongodb 中的路由 我的问题是 当我在 React 应用程序中收到这些数据时 如何使用这些数据将其转换