从 sql server 保存/检索图像以将 api 表达到反应应用程序中答案

【问题标题】：Saving/Retrieving image from sql server to express api into react app从 sql server 保存/检索图像以将 api 表达到反应应用程序中
【发布时间】：2018-01-10 20:02:01
【问题描述】：

我的桌子是这样的

CREATE TABLE dbo.t_picures(
  picureId INT IDENTITY(1, 1) NOT NULL,
  name NVARCHAR(50) NOT NULL,
  extension NVARCHAR(10) NOT NULL,
  picture VARBINARY(MAX) NOT NULL,
  CONSTRAINT PK_pictureId PRIMARY KEY (pictureId)
);

我可以使用以下 SQL 语句将图像保存到我的 SQL Server：

INSERT INTO dbo.t_picture
VALUES (N'Smile.png', N'.png',
    (
        SELECT  *  
        FROM OPENROWSET(BULK N'C:\{Path to my image}\Smile.png',SINGLE_BLOB) AS picture
    )
)

当我SELECT picture FROM dbo.t_pictures WHERE name='Smile.png' 时，结果列会产生一个看起来像这样的结果列：0xFFD8FFE000104A46494600010200006400640000FFDB0043...（它会持续更长的时间）。我认为这是一个很长的字节数组。

然后我通过我的 express api 和console.log(this.state.data.picture) 将结果发送到我的 react 应用程序的客户端。图片栏在我的react app中console.logged时是这样的：{type: "Buffer", data: Array(14598)}

我尝试使用 <img src={this.state.data.picture} /> 创建图像，但图像显示为损坏。

我在几个地方读过，您可以通过将缓冲区数组转换为 base64 字符串来显示此内容，但我不知道该怎么做。我也不确定在第一次检索数据时是否应该在 T-SQL 中执行此操作，或者在客户端收到数据时是否应该将其转换为 javscript。

如何使用来自{type: "Buffer", data: Array(14598)} 的值显示图像？另外，有没有更好的方法从 sql server 存储/检索图像？

任何帮助将不胜感激！谢谢。

【问题讨论】：

标签： javascript sql-server reactjs tsql sql-server-2014

【解决方案1】：

当使用以下查询从数据库中检索数据时，我能够通过将二进制值转换为 base64 字符串来显示图像：

cast('' as xml).value(
  'xs:base64Binary(sql:column("table.column"))', 'varchar(max)'
)

table 是你的表名，column 是你的列名

然后我使用如下数据 URI 显示图像：

<img src={`data:image/png;base64,${this.state.data.picture}`} />

希望这可以帮助遇到同样问题的其他人！

【讨论】：