javascript - 如何显示 JSON 文件对象?
问题描述
使用express-fileupload我有一个存储在数据库中的文件的 JSON 对象。
例如:
{
name: 'bear.jpg',
data: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff fe 00 3b 43 52 45 41 54 4f 52 3a 20 67 64 2d 6a 70 65 67 20 76 31 2e 30 20 28 75 73 69 ... 15948 more
bytes>,
size: 15998,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/jpeg',
md5: '7505ae720e82ac3b807b3e39483bebab',
mv: [Function: mv]
}
我目前正在使用 EJS。
如何在 html 中显示此文件?
我希望有类似的东西:
<html>
<body>
<img src="<%= the-file %>" width="200" height="200">
</body>
</html>
这不是将缓冲区数据转换为图像的副本,因为它查询通用文件和标签的技术(另一个示例可能是.glb
带有<model-viewer>
标签的文件),图像仅用作示例。
解决方案
<your-tag src="data:<%= file.mimetype %>;base64,<%= file.data.buffer.toString('base64') %>">
应该适用于任何文件类型。
由于your-tag
可能对应于特定file.mimetype
类型,因此您可以简单地对该类型进行硬编码,例如:
<img src="data:image/jpeg;base64,<%= file.data.buffer.toString('base64') %>">
有用的链接:
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
- https://nodejs.org/api/buffer.html#buffer_buf_tostring_encoding_start_end
不知道为什么以前不能简单地回答。
推荐阅读
- c# - 如何使用 Microsoft Graph .NET SDK 检索 OneNote 页面的内容?
- react-native - 如何在另一个组件中调用一个组件的 redux 操作
- mongodb - 我如何在 NESTJS 中设置多租户
- javascript - 为什么在两次请求后我的数组未定义?(使用 chart.js 和 stock.js)
- assembly - 这个 8051 ASM 功能是否像我想的那样复杂,还是我遗漏了什么?
- python - jupyter中的散景图被挤压
- javascript - JavaScript如何连接两个空值或未定义并返回空值
- php - 如何构建一个将日期的总和显示为一个的循环
- android - 为列表视图中的项目设置项目单击侦听器并转到新活动
- arduino - 为什么无论输入如何,adc 总是读取 1023