时间戳

首页 > 解决方案 > 如何在 React 页面上显示存储在 MySQL 中的图像

mysql - 如何在 React 页面上显示存储在 MySQL 中的图像

问题描述

我在 MySQL 中有图像。试图在我的 React 页面上显示一个，因此配置了 Express。数据库中的图片存储为 mediumblob 并以 base64 编码。那里看起来像

iVBORw0KGgoAAAANSUhEUgAABQAAAAPACAYAAABq3NR5AAAgAElEQVR4AezBCZzXc+I4/uf70zSmTMd0rIqwSWzLLiK5i9....

所以我配置 Express 来获取这些数据：

const mysql = require("mysql");
const bodyParser = require("body-parser");
const express = require("express");
const app = express( );
const port = 4000;
app.use(bodyParser.json( ));

var mysqlConnection = mysql.createConnection({
  host: "host",
  user: "user",
  password: "password",
  database: "db"
});
mysqlConnection.connect((err) => {
  if (!err) {
    console.log("DB Connected");
  }  else  {
      console.log("DB Connection Failed  " + err.message);
  }
});

app.get("/rf", (req, res, next) => {
  mysqlConnection.query(
    "SELECT photo FROM  photo WHERE id=365",
    function(err, results, fields) {
      if (err) throw err;
      res.set("Access-Control-Allow-Origin", "*");
      res.send(results);
    }
  );
});

app.listen(port, ( ) => {
  console.log(`Listening at http://localhost:${port}`);
});

当尝试在 http://localhost:4000/rf 获取数据时，我收到的不是 base64 字符串，而是 Unit8Array，它看起来像：

[{“照片”：{“类型”：“缓冲区”，“数据”：[105,86,66,79,82,119,48,75,71,103,111,65,65,65,65,78,83,85,104, 69....

而且我无法在页面上显示它。请帮助我，或者给我解决这个问题的样本。

标签： mysqlreactjsimageexpressbase64

解决方案

大概您想在您的网页中放置一个看起来像这样的图像标签。

<img src="http://localhost:4000/rf" />

并让您的 /rf 端点传送图像。如果不是这种情况，请编辑您的问题。

为此，您必须使用正确的 MIME 类型将二进制图像传送到浏览器。首先从Base64解码，然后设置MIME类型，然后发送。这样的代码可能会有所帮助。

 function(err, results, fields) {
  if (err) throw err;
  if (results && results.length >= 1) {    /* results is an array */
    const imgdata = Buffer.from(results[0].photo, 'base64')
    res.type('png').send(imgdata)
}

请注意，大多数浏览器都会接受 JPEG。GIF 和 PNG，只要它们具有任何一种有效的 MIME 类型（image/png例如）。这对您来说是幸运的，因为您看起来不像将每个图像的 MIME 类型存储在表中。

而且，顺便说一句，使用npm cors包来做你的 CORS工作，而不是在你自己的代码中插入额外的 CORS 标头。CORS 是 xxx 脖子上要调试的一个痛点，包已经调试好了。

最后，请注意，将图像存储在数据库中的扩展性很差。如果您获得大量流量，您不希望您的 MySQL 服务器成为瓶颈。最好将图像放在静态文件系统中，并将它们的路径存储在数据库中。

推荐阅读