将blob（由图像组成）更改为图像并将该图像放入<img>

Question

所以。我正在将记录添加到数据库（带有 XAMPP 的 MySQL 和“mysql2”：“^3.6.2”包）

export const addPage = async (req,res) => {
        try
        {
            if(req.session.user !== undefined)
            {
                const body = req.body;
                const plik =  req.file.buffer.toString('utf-8'); // REMEMBER THIS
                const link = body.link;
                const tytul = body.tytul;
                const opis = body.opis;
                const user =  req.session.user.substr(-1);
                const curDate = new Date();
                const [re] = await (global.db).query("INSERT INTO sites VALUES (NULL, ?, ?, ?, ?, ?, ?);", [plik, link, tytul, opis, user, curDate]);
                res.redirect("/panel")
                return 0;
            }
            else{res.redirect('/');}
        }
        catch(err)
        {
            throw err; res.redirect('/login');
        }
}

我想做一个获取所有记录的API。所以我就这么做了

export const getAllPages = async (req,res) => 
{
    try
    {
        var [rows,fields] = await (global.db).query("select * from sites order by creation_date");
        var image_array = [];

        rows.forEach(element => {
            image_array.push(element.icon.toString('base64'))
        });


       res.status(201).json({
            status:"success",
            Length: rows.length,
            data: rows,
            images: image_array
        });
    }
    catch(err)
    {
        res.status(401).json({
                status:"fail",
                message: err.message
        }) 
    }
}

注意：(global.db) id 变量保存与数据库的连接，它运行良好，没有问题。但我有一个由状态、数据长度、数据本身（由数据库中的记录组成）和图像组成的对象，这些图像由传输到 base64 字符串的 blob 数组组成。

在前端的 js 文件中，我有：

const PagesData = fetch("http://localhost:3000/api/v1/Pages", { method:"GET"}) 
    .then((r) => r.json())
    .then((Data) => {
        console.log(Data);
        for (let i = 0 ; i < Data.Length; i++)
        { 
            let element = Data.data[i]
            console.log(element)

            document.getElementsByTagName('main')[0].innerHTML+=
            `
                    <a class="window octagon-border" href="sitedetails/${element.id}">
                        <div class="window-img">
                            <img id="${i}"/>
                        </div>
                        <div class="window-title">
                            <div class="btn inverted-colors no-hover">${element.title}</div>
                        </div>
                        <div class="window-mask hexagon"></div>
                    </a>
            `
        };   
        for(let i = 0; i< Data.Length; i++)
        {
            document.getElementById(i).src = Data.images[i];
        }     
    })
    .catch((e) =>  console.log(e));

我得到的结果是，在 img 标签中，我得到 src="" 并且其中有一个长字符串（它有字符，而不仅仅是数字，因此转换为字符串（'base64'）有效）。问题是它不显示结果（它不显示和图像，而是浏览器中的一个图标，表明没有这样的文件）。

可能存在一个问题，在数据库中我将utf-8转换为utf-8转换，当从数据库获取数据时我使用base64，但是当进入数据库时我使用base 64然后它不起作用。

我想从blob中获取图像，然后将其显示在img标签中

我使用节点v20.5.1

Answer 1

我不完全理解数据库部分，但关于前端的 blob：

• 在您期望出现斑点的部分，返回响应为

  response.blob()

  而不是

  response.json()

  。基本上，试试这个：

return response.blob().then(result =>{
  const img = URL.createObjectURL(result)
  const myImgTag = document.querySelector(".my-img-tag")
  myImgTag.src = img
})