Flask 读取 MySQL 数据库图片并返回给前端的方法

2025-01-14 17:32:44   小编

Flask 读取 MySQL 数据库图片并返回给前端的方法

在 Web 开发中,经常需要从数据库读取图片并展示给前端用户。Flask 作为一个轻量级的 Python Web 框架,与 MySQL 数据库结合使用可以高效地实现这一功能。以下将详细介绍具体的实现方法。

确保安装了必要的库。使用 pip install flask 安装 Flask 框架,通过 pip install mysql-connector-python 安装 MySQL 连接库。

连接 MySQL 数据库是第一步。在 Python 代码中,使用以下代码建立连接:

import mysql.connector

mydb = mysql.connector.connect(
    host="localhost",
    user="your_username",
    password="your_password",
    database="your_database"
)

接下来,编写从数据库读取图片的函数。假设图片数据存储在名为 images 的表中,表结构包含 idimage_data 字段。

def get_image_from_db():
    mycursor = mydb.cursor()
    query = "SELECT image_data FROM images WHERE id = 1"  # 根据实际情况修改查询条件
    mycursor.execute(query)
    result = mycursor.fetchone()
    if result:
        return result[0]
    return None

在 Flask 应用中,创建一个路由来处理图片请求。

from flask import Flask, send_file
import io

app = Flask(__name__)

@app.route('/get_image')
def get_image():
    image_data = get_image_from_db()
    if image_data:
        img_io = io.BytesIO(image_data)
        return send_file(
            img_io,
            mimetype='image/jpeg',  # 根据图片实际格式调整
            as_attachment=False
        )
    return "图片未找到"

if __name__ == '__main__':
    app.run(debug=True)

在上述代码中,send_file 函数用于将读取到的图片数据作为响应返回给前端。io.BytesIO 将字节数据包装成文件对象,方便 send_file 处理。

最后,在前端页面通过 AJAX 或其他方式请求 /get_image 路由。例如,使用 jQuery 的 AJAX:

<!DOCTYPE html>
<html>

<head>
    <title>显示图片</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <img id="image_display" />
    <script>
        $(document).ready(function () {
            $.ajax({
                url: '/get_image',
                type: 'GET',
                success: function (response) {
                    $('#image_display').attr('src', 'data:image/jpeg;base64,' + btoa(response));
                },
                error: function () {
                    console.log('请求失败');
                }
            });
        });
    </script>
</body>

</html>

通过以上步骤,就可以在 Flask 应用中实现从 MySQL 数据库读取图片并返回给前端显示的功能。这种方法在实际项目中具有广泛的应用,能够满足多种展示图片的需求。

TAGS: MySQL数据库 前端交互 图片读取 Flask技术

欢迎使用万千站长工具!

Welcome to www.zzTool.com