如何使用JavaScript读取并展示MySQL中longblob字段存储的Blob图片

1 后端路由核心问题 #

• 当前用res.json返回数据时，会自动将MySQL取出的longblob二进制Buffer转成JSON可序列化格式，和前端设置的responseType: 'blob'预期接收的二进制流完全不匹配，会直接导致解析失败。
• 附带问题：GET请求没有请求体，注释里的req.body.menuNo写法错误，后续要传参数请用req.query.menuNo接收。

修改后的后端代码：

router.get('/getMenuImg', function (req, res) {
    // var menuNo = req.query.menuNo; 后续传参用这个写法
    var query = `SELECT menuImg FROM menu WHERE menuNo = 1`;

    connection.query(query, function (error, result) {
        if(error) {
            console.log("error ocurred: ", error);
            res.status(400).send("error ocurred")
            return
        }
        if(!result || result.length === 0) {
            res.status(404).send("image not found")
            return
        }
        // 根据实际图片类型设置响应头，png就改image/png
        res.setHeader('Content-Type', 'image/jpeg')
        // 直接返回二进制Buffer，不要包成JSON
        res.send(result[0].menuImg)
    })
})

2 前端代码核心问题 #

• 后端修改为直接返回二进制流后，接口返回的完整data就是blob对象，不需要再取data.menuImg属性。

修改后的前端代码：

<body>
    <img id="img" width="400" height="400">
</body>
<script>
    // 注意确保页面已提前引入jQuery
    $.ajax({
        url:'/admin/getMenuImg',
        cache:false,
        xhr:function(){
            var xhr = new XMLHttpRequest();
            xhr.responseType= 'blob'
            return xhr;
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
            // 图片加载完释放对象URL，避免内存泄漏
            img.onload = function() {
                url.revokeObjectURL(img.src)
            }
        },
        error:function(){
            console.log('图片加载失败')
        }
    });
</script>

可选替代方案 #

如果不想修改后端返回结构，也可以走Base64方案：

• 后端修改返回逻辑：res.json({"code": 200, "menuImg": result[0].menuImg.toString('base64')})
• 前端去掉xhr配置项，success里直接赋值：img.src = 'data:image/jpeg;base64,' + data.menuImg即可。

内容的提问来源于stack exchange，提问作者merong