如何通过PHP正确显示上传至MySQL数据库存储的图片

问题现象 #

将MySQL存储的图片渲染到HTML页面时，仅显示图片占位图标，部分场景出现乱码，异常效果参考：

现有代码核心问题 #

• 表单缺少文件上传必需配置：<form>标签未加enctype="multipart/form-data"属性，浏览器不会提交真实文件内容，后端只能拿到空值或文件名字符串。
• 后端接收文件逻辑错误：PHP中文件上传数据存储在$_FILES超全局变量，而非$_POST，现有代码根本没有读取到图片二进制内容，存入数据库的是无效值。
• 存在SQL注入风险：直接拼接用户输入到SQL语句，不仅会导致二进制数据转义错误，还存在严重的注入漏洞。
• Data URI格式错误：渲染图片时的data:image;base64,缺少具体图片MIME类型，加上PHP字符串拼接语法错误，浏览器无法识别为合法图片资源。
• 数据库字段配置不匹配：存储图片二进制内容需要用LONGBLOB类型字段，普通VARCHAR/TEXT字段会因长度不足、字符集转义导致二进制数据损坏。

正确实现步骤 #

1. 修正上传表单 #

给form标签添加文件上传必需的enctype属性，其余表单项保持原有逻辑即可：

<form method="post" enctype="multipart/form-data" action="http://localhost:63342/sqlvali-master111/publicRoot/sqlvali/index.php?action=lec_hub/pages">
    <div class="form-group">
        <label for="description" class="control-label">Description:</label>
        <input type="text" class="form-control" id="description" name="description">
    </div>
    <div class="form-group">
        <label for="external_link" class="control-label">External Link:</label>
        <input type="text" class="form-control" id="external_link" name="external_link">
    </div>
    <div class="form-group">
        <label for="query_structure" class="control-label">Query Structure:</label>
        <input type="file" class="form-control" id="query_structure" name="query_structure">
    </div>
    <div class="form-group">
        <label for="feedback" class="control-label">Feedback:</label>
        <input type="text" class="form-control" id="feedback" name="feedback">
    </div>
    <div class="form-group">
        <label for="likert" class="control-label">Likert-type Scale:</label>
        <input type="text" class="form-control" id="likert" name="likert">
    </div>
    <div class="form-group">
        <label for="query_example" class="control-label">Query Example:</label>
        <input type="text" class="form-control" id="query_example" name="query_example">
    </div>
    <div class="form-group">
        <input type="hidden" class="form-control" id="chapter_id_fk" name="chapter_id_fk" value="<?php echo $chapter_id?>">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <input name = "add" type = "submit" id = "add" value = "Add">
    </div>
</form>

2. 调整数据库表结构 #

提前修改pages表配置：

• 将query_structure字段类型改为LONGBLOB，用于存储图片二进制内容
• 新增query_structure_mime字段，类型为VARCHAR(50)，用于存储图片MIME类型（如image/png、image/jpeg）

3. 修正PHP入库逻辑 #

从$_FILES读取上传文件，使用预处理语句避免注入和二进制转义问题：

<?php
$con = mysqli_connect("localhost", "root", "", "lectureHub");
if(isset($_POST['add'])) {
    // 校验文件上传状态
    if ($_FILES['query_structure']['error'] !== UPLOAD_ERR_OK) {
        die("图片上传失败，错误码：" . $_FILES['query_structure']['error']);
    }
    // 读取临时文件中的二进制内容、获取图片MIME类型
    $imageData = file_get_contents($_FILES['query_structure']['tmp_name']);
    $imageMime = mime_content_type($_FILES['query_structure']['tmp_name']);
    
    // 普通字段从$_POST读取
    $description = $_POST['description'];
    $external_link = $_POST['external_link'];
    $chapter_id_fk = $_POST['chapter_id_fk'];
    $feedback = $_POST['feedback'];
    $likert = $_POST['likert'];
    $query_example = $_POST['query_example'];

    // 预处理SQL，避免注入和二进制转义错误
    $stmt = mysqli_prepare($con, "INSERT INTO pages (description, external_link, chapter_id_fk, query_structure, query_structure_mime, feedback, likert, query_example) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
    mysqli_stmt_bind_param($stmt, "sssbssss", $description, $external_link, $chapter_id_fk, $imageData, $imageMime, $feedback, $likert, $query_example);
    // 传输二进制大字段
    mysqli_stmt_send_long_data($stmt, 3, $imageData);
    $retval = mysqli_stmt_execute($stmt);
    if(!$retval ) {
        die('数据写入失败: ' . mysqli_stmt_error($stmt));
    }
    mysqli_stmt_close($stmt);
}

4. 修正前端图片渲染代码 #

补全Data URI的MIME类型，修正PHP拼接语法：

<div class='col-md-8'>
    <h3>query Structure</h3>
    <img src="data:<?php echo $row['query_structure_mime']; ?>;base64,<?php echo base64_encode($row['query_structure']); ?>" alt='query structure' style='width: 100px; height: 100px'>        
</div>

优化建议 #

• 非必要不建议将图片直接存入数据库，流量较高的场景下建议将图片存储在服务器磁盘或对象存储中，数据库仅保存图片访问路径，性能提升明显。
• 上传环节建议增加文件类型、大小校验，仅允许上传指定格式的图片，防范恶意文件上传风险。
• 渲染图片前先判断二进制数据是否为空，避免输出无效的Data URI。

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