如何将文件缓冲区转换为 标签 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? 的相关文章

  • TRACKER:错误TRK0005:无法找到:“CL.exe”。该系统找不到指定的文件

    我尝试在 Windows 8 上的 Node js 项目中执行以下命令 npm 安装 电子邮件受保护 cdn cgi l email protection 但我收到一个错误 我不知道如何处理 TRACKER 错误TRK0005 无法找到 C
  • 如何删除控制台中打印的字符

    我一直在搜索如何用其他语言执行此操作 发现必须使用特殊字符 b 来删除最后一个字符 如何删除控制台应用程序中打印的字符 linux https stackoverflow com questions 430713 how do i eras
  • Apollo 客户端延迟刷新

    In Apollo Client v3React 实现 我使用钩子来使用订阅 当我从订阅接收数据时 我想重新获取查询 但前提是查询之前已执行过并且位于缓存中 有办法实现这一点吗 我首先进行惰性查询 然后在收到订阅数据时手动检查缓存 然后尝试
  • OperationFailure:在 MongoEngine/PyMongo 中线程化时出现数据库错误

    我有一个函数可以从网站读取数据 对其进行处理 然后将其加载到 MongoDB 中 当我在没有线程的情况下运行它时 它工作正常 但是一旦我设置了只调用这个函数的 celery 任务 我经常会收到以下错误 OperationFailure 数据
  • “react-infinite-scroll-component” 一次调用后停止工作(loadMore 只被调用一次)

    我使用react infinite scroll component库进行分页 但即使hasMore为true loadMore也会被调用一次
  • django npm 和 Node 包架构

    在我加入的项目中 这是以下架构node packages Django project app1 app2 node modules foundation sites grunt static css images js urls py s
  • Firebase 托管部署失败

    Running firebase deploy在给我一个超时错误之前会运行几分钟Error ESOCKETTIMEDOUT 我之前已经成功部署了多次 除了项目的前端 用 React 编写 之外 没有更改任何内容 我有一个单独的文件夹 其中包
  • Socket.io v3 不支持的协议版本错误

    我坚持使用较新版本的 socket io 一切都很好 但是当我想升级到 socket io 3 时 一切都崩溃了 目前在客户端上 我收到一个 400 HTTP 状态代码 并带有以下 JSON 响应 code 5 message Unsupp
  • UnhandledPromiseRejectionWarning: MongoError: w 必须是连接处的数字或字符串

    任何人都知道为什么我会收到此错误 UnhandledPromiseRejectionWarning MongoError w 必须是连接处的数字或字符串 我在运行下面的代码时遇到此错误 它的目的是检查用户是否在 mongodb 数据库中 如
  • npm 命令 create-react-app 失败

    我正在尝试在运行 Os X sierra 10 12 6 的计算机 mac pro 2017 上测试reactjs 我已经遵循了 Facebook 教程 确保您安装了最新版本的 Node js done 按照安装说明进行操作创建一个新项目
  • 将MongoDb atlas数据库导出到本机Mongo compass

    我在 Atlas 中有一个名为 test 的远程数据库 我想将集合名称 image table 下载为 JSON 文件 在 Mac 终端中 mongoexport db test collection image table image j
  • 如何让 Node.js 作为后台进程运行并且永不死掉?

    我通过 putty SSH 连接到 linux 服务器 我尝试将其作为后台进程运行 如下所示 node server js 然而 2 5 小时后 终端变得不活动 进程终止 即使终端断开连接 我是否也可以使进程保持活动状态 Edit 1 事实
  • 在 NodeJS 中将子进程的输出保存在父进程的变量中

    我想在 NodeJS 中启动一个子进程并将其输出保存到一个变量中 以下代码将其提供给标准输出 require child process execSync echo Hello World stdio inherit 我的想法与此代码类似
  • 使用node.js安装xml2json时出错

    我尝试为 node js 安装 xml2json 包 但它给了我错误 Error are as below 我的系统配置如下 Node js 版本 v5 4 1 npm 版本 3 3 12 操作系统 Windows 10 64 位 pyth
  • React - 无法读取未定义的属性[重复]

    这个问题在这里已经有答案了 通常 当我单击子组件中的菜单项时 它会调用 this handlesort 这是一个本地函数 处理排序从我的父组件中获取 onReorder 属性 onReorder 调用名为 reOrder 的本地函数 它设置
  • 如何在机器人框架中的两条消息之间设置延迟 - Node.js

    我正在开发一个机器人 它使用 botbuilder JS V4 使用 Direct Line 连接到我们的客户端应用程序 由于某些原因 消息以错误的顺序发送给机器人 例如 用户 你好 机器人 我能帮你什么忙吗 机器人 嗨 我是机器人 作为解
  • 无法运行 npm install

    In here http devdocs magento com guides v2 0 frontend dev guide css topics css debug html它说要跑npm install 但是当我运行时出现此错误sud
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • Mongoose - 查询从多个集合中获取数据

    我想要获取猫鼬的查询在 Node js 应用程序中 如下所述输出 user js comment js 和 post js 是我使用的模型文件 user js var mongoose require mongoose var Schema
  • pymongo MongoClient 连接到 ReplicaSet

    我采用 pymongo 的 MongoClient 类来连接到具有三个节点 1 个主节点 2 个辅助节点 的副本集 代码片段如下 c MongoClient secondary1 hostname secondary2 hostname r

随机推荐

  • 当 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 应用程序中收到这些数据时 如何使用这些数据将其转换