如何通过Node.js/Express将PostgreSQL bytea类型图片展示给客户端

问题背景 #

我尝试展示存储在PostgreSQL bytea类型列中的图片，试过修改服务器、客户端的多种方案都没得到预期结果，想知道用Node.js/Express从PostgreSQL取数据并传给客户端的正确方式。

我尝试过的代码 #

服务器端代码 #

static async getImagen(req, res) {
    const nombre = req.params.nombre
    try{
        const result = await ImagenModel.getImagen()
        if (result.length > 0){
            res.contentType('image/png')
            res.send(result[0].imagen)   
            return
        }

        res.status(400).json({message: "No hay registros"})
    }catch(e){
        console.log(e)
        res.status(500).json({message: "Algo ha salido mal"})
    }
}

不管用res.send、res.end还是转成base64字符串都无效，客户端始终返回乱码响应。

客户端Fetch代码 #

const img = document.getElementById("img")
const uri = 'http://localhost:3000/imagen/imagen'

fetch(uri).then(res => res.blob())
.then(data => {
    img.src = URL.createObjectURL(data)
})

同样无法正常展示图片。

正确实现方案 #

1. 确保数据库查询返回Buffer类型 #

PostgreSQL的bytea数据在Node.js的pg库中默认会返回Buffer对象，但如果模型层做了额外的字符串转换，就会导致数据损坏。检查ImagenModel.getImagen()的实现，确保直接返回数据库查询到的bytea字段：

const { Pool } = require('pg');
const pool = new Pool({ /* 你的数据库配置 */ });

class ImagenModel {
    static async getImagen(nombre) {
        // 传入文件名参数，精准查询目标图片
        const res = await pool.query('SELECT imagen FROM tu_tabla WHERE nombre = $1', [nombre]);
        return res.rows;
    }
}

此时result[0].imagen应该是Buffer类型。

2. 服务器端正确发送图片数据 #

在Express路由中，设置正确的响应头并直接发送Buffer：

static async getImagen(req, res) {
    const nombre = req.params.nombre
    try{
        const result = await ImagenModel.getImagen(nombre);
        if (result.length > 0){
            const imageBuffer = result[0].imagen;
            // 若不确定图片类型，可在数据库中额外存储MIME类型字段，动态设置此处值
            res.setHeader('Content-Type', 'image/png');
            res.setHeader('Content-Length', imageBuffer.length);
            res.send(imageBuffer);
            return;
        }

        res.status(404).json({message: "未找到图片记录"});
    }catch(e){
        console.error(e);
        res.status(500).json({message: "服务器内部错误"});
    }
}

3. 客户端正确展示图片 #

方式一：直接使用img标签src

这是最简洁的方式，浏览器会自动处理图片解析：

<img id="img" src="http://localhost:3000/imagen/目标文件名" alt="展示图片">

方式二：Fetch API处理（按需使用）

如果必须用Fetch，确保完整处理响应：

const img = document.getElementById("img")
const uri = 'http://localhost:3000/imagen/目标文件名'

fetch(uri)
.then(res => {
    if (!res.ok) throw new Error('图片请求失败');
    return res.blob();
})
.then(data => {
    img.src = URL.createObjectURL(data);
})
.catch(err => console.error(err));

常见问题排查 #

• 检查数据库中bytea数据是否完整：用PostgreSQL的pg_read_binary_file函数对比原始文件，确认存储的数据没有损坏。
• 确认模型层未对bytea数据做额外编码（比如误转成base64字符串存储，导致取出时需要解码）。
• 排查跨域问题：若客户端与服务器域名不同，需在Express中配置CORS中间件。

内容的提问来源于stack exchange，提问作者Joseph Mena Sandoval