如何使用Javascript显示MySQL数据库中存储的MediumBLOB类型图片

问题根因 #

• 变量拼写错误：前端JS代码中你定义的base64存储变量是bufferBase64，但给img标签赋值时错写为bufferBase，导致图片源为空。
• API使用错误：new Buffer()是Node.js专属API，浏览器原生环境没有这个对象，运行时会直接报错。
• 二进制数据序列化错误：BLOB是二进制格式，直接用json_encode处理会导致内容损坏，前端拿到的二进制数据本身就不可用。
• SQL语法/安全隐患：如果username字段是字符串类型，你写的查询语句缺少单引号包裹变量，会触发SQL语法错误，同时存在SQL注入风险。

修复方案 #

1. 修改后端update.php代码

直接在PHP侧将BLOB转为base64再返回，避免前端处理二进制数据的问题，同时修复SQL安全问题：

<?php
$conn = mysqli_connect('localhost', 'root', '', 'phpfinals');
if($conn->connect_error)
{
    die("Connection Failed : ".$conn->connect_error);
}

//Sending details to be viewed
if(isset($_POST['sendview']))
{
    $user_id = $_POST['sendview'];
    // 使用预处理语句避免SQL注入
    $stmnt = $conn->prepare("SELECT `username`, `password`, `firstname`, `middlename`, `lastname` , `gender`, `yearlevel`, `position`, `accesslevel`, `images` FROM phpfinals.records WHERE `username` = ?");
    $stmnt->bind_param("s", $user_id);
    $stmnt->execute();
    $result = $stmnt->get_result();
    $row = $result->fetch_assoc();
    // 直接在后端将BLOB转成base64
    if($row){
        $row['images'] = base64_encode($row['images']);
    }
    echo json_encode($row);
}
else
{
    $response['status'] = 200;
    $response['message'] = "Invalid or data not found";
    echo json_encode($response);
}
?>

2. 修改前端JS代码

不需要再做二进制转码处理，直接用后端返回的base64内容赋值即可：

function ShowDetails(viewid)
{
    $('#view').val(viewid)
    $.post("update.php",{sendview:viewid},function(data, status){
        var userid = JSON.parse(data);
        $('#uname').text("Username: " + userid.username)
        $('#pass').text("Password: " + userid.password)
        $('#fname').text("First Name: " + userid.firstname)
        $('#mname').text("Middle Name: " + userid.middlename)
        $('#lname').text("Last Name: " + userid.lastname)
        $('#gen').text("Gender: " + userid.gender)
        $('#yearlevel').text("Year Level: " + userid.yearlevel)
        $('#pos').text("Position: " + userid.position)
        $('#accesslevel').text("Access Level: " + userid.accesslevel)       
        // 直接用后端返回的base64赋值
        $('#img').attr("src", "data:image/jpeg;base64," + userid.images)               
    });

    $('#viewModal').modal("show");
}

额外注意 #

如果你的图片存储格式不是JPEG，需要对应修改data:image/jpeg;base64,中的MIME类型，比如PNG格式改为data:image/png;base64,，避免浏览器无法识别图片。

内容的提问来源于stack exchange，提问作者Austin Gyan Marbella