Flask框架下读取MySQL数据库图片并返回前端的完整指南
本文将详细讲解如何使用Flask框架从MySQL数据库读取图片数据并将其返回给前端。
代码示例及详解
假设您已成功连接到MySQL数据库，以下代码演示了图片读取和返回过程：
立即学习“前端免费学习笔记（深入）”；
from flask import Flask, send_file, jsonify
from your_models import Image # 替换为你的数据库模型
app = Flask(__name__)
# ... 数据库连接配置 ...
@app.route("/get_image/", methods=["GET"])
def get_image(image_id):
"""获取图片"""
try:
image = Image.query.get(image_id) # 使用ORM查询
if not image:
return jsonify({"error": "图片未找到"}), 404
# 返回图片二进制流，并根据实际情况调整mimetype
return send_file(io.BytesIO(image.data), mimetype=image.mimetype)
except Exception as e:
return jsonify({"error": str(e)}), 500
代码说明:
-
/get_image/: 定义了访问图片的API接口， -
Image.query.get(image_id): 使用ORM框架（例如SQLAlchemy）查询数据库，获取指定ID的图片对象。 请替换Image为你实际的数据库模型名称。 -
image.data: 假设你的数据库模型中data字段存储了图片的二进制数据。 -
image.mimetype: 假设你的数据库模型中mimetype字段存储了图片的MIME类型（例如'image/jpeg'，'image/png'）。 这确保了浏览器能够正确渲染图片。 -
io.BytesIO(image.data): 将二进制数据转换为可由send_file函数处理的流对象。需要导入io模块:import io -
send_file(...): 将图片二进制数据直接返回给前端。 - 错误处理：加入了
try...except块，处理潜在的数据库错误，返回更友好的错误信息。
前端调用示例 (JavaScript):
const imageId = 1;
const img = new Image();
img.src = `/get_image/${imageId}`;
document.body.appendChild(img);
这段代码会向后端请求图片，并将其显示在网页上。 记住替换 /get_image/${imageId} 为你的实际API地址和图片ID。
数据库模型示例 (SQLAlchemy):
from sqlalchemy import Column, Integer, LargeBinary, String
from your_database import Base # 替换为你的数据库基类
class Image(Base):
__tablename__ = 'images'
id = Column(Integer, primary_key=True)
data = Column(LargeBinary)
mimetype = Column(String(100))
请根据你的数据库设计调整模型字段。 确保data字段足够大以容纳图片数据。
记住安装必要的库：pip install Flask SQLAlchemy
通过以上步骤，您可以成功地在Flask应用中读取MySQL数据库中的图片并将其返回给前端。 请根据您的实际情况调整代码和数据库模型。
