技术文摘
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 数据库读取图片并返回给前端显示的功能。这种方法在实际项目中具有广泛的应用,能够满足多种展示图片的需求。
- ES6 的十大突出特性
- Python 运行过慢?三行并行运算代码让速度提升 4 倍!
- 软件工程师怎样转行至人工智能领域
- Node.js 开源博客系统 Ghost 发布 1.8.1 版本
- Python3 中 HTTP 请求的四种实现方式
- 由分布式计算至分布式训练
- 一次由 DNS 缓存导致的惊心动魄惨案
- 瑞典程序员押宝比特币身家暴增 130 倍成功逆袭
- Python 数据分析中 Pandas 常用数据查询语法的运用
- 张大胖怎样从读写分离到 CQRS 解决性能问题
- C++语言库下GCC与Clang编译器的基准测试报告(ETL)
- 七个有益编程习惯
- 如何写出美观的 React 组件?
- 车联网的三大商业模式探寻
- 机器学习中 Logostic 回归的漫谈