技术文摘
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 的表中,表结构包含 id 和 image_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 数据库读取图片并返回给前端显示的功能。这种方法在实际项目中具有广泛的应用,能够满足多种展示图片的需求。
- Uniapp 中养生健康与运动计划的实现方法
- HTML、CSS与jQuery实现瀑布流布局技术指南
- 利用Layui实现图片遮罩效果的方法
- HTML、CSS 与 jQuery 实现图片切换高级功能的方法
- CSS 渲染属性 box-shadow 与 text-shadow 指南
- 利用Layui实现图片放大镜效果的方法
- 用HTML、CSS和jQuery制作带动画的选项卡
- uniapp实现房屋租赁与房产交易的方法
- Layui实现可拖拽图片裁剪功能的方法
- 用HTML、CSS和jQuery制作动态图片轮播的方法
- Uniapp 实现股票行情与资金统计的方法
- CSS实现文字轮播无缝滚动效果的方法
- HTML、CSS与jQuery实现图片变形效果技巧
- 用 HTML、CSS 与 jQuery 打造带动态效果的搜索框
- HTML教程:用Grid布局实现多栏布局的方法