使用Flask实现本地图片上传和显示，支持mysql存储

xingdiango

于 2023-12-28 10:45:12 发布

阅读量1.8k

点赞数 14

文章标签： flask python 后端

本文链接：https://blog.csdn.net/xingdiango/article/details/135263186

版权

要使用FLask框架实现图片上传和显示，首先需要创建Flask框架的项目（使用pycharm专业版）

app.py

import pymysql
from flask import Flask, request, redirect, url_for, render_template
import os

from pymysql import Error

app = Flask(__name__)
app.secret_key = 'dsdfsfdaxxx'

# 数据库连接对象
def get_db_connection():
    # 连接数据库
    db = pymysql.connect(user='root', password='Nebula@123', host='你的IP', port=3306, database='你的数据库')
    return db

# 保存图片路径到数据库
def save_to_db(filename):
    try:
        conn = get_db_connection()
        cursor = conn.cursor()
        query = "INSERT INTO images (image_path) VALUES (%s)"
        cursor.execute(query, filename)  # 修改为你的本地目录路径和文件名
        conn.commit()
        cursor.close()
        conn.close()
    except Error as e:
        print(e)

# 上传本地图片
@app.route('/')
@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        file = request.files['image']  # 从请求中获取文件
        filename = os.path.join(os.getcwd(),'static/uploaded_images', file.filename)  # 拼接文件绝对路径
        file.save(filename)   # 将文件保存到本地文件系统
        # save_to_db(filename)  # 将文件路径存储到数据库中
        return redirect(url_for('uploaded_file', filename=file.filename))  # 重定向到文件上传成功的页面
    return render_template('upload.html')


@app.route('/uploaded_file/<filename>')
def uploaded_file(filename):
    return render_template('index.html',filename=filename)  # 显示已上传的图片

需要在templates目录下创建两个html，一个用来上传，一个用来显示

index.html用来做显示：

注意：需要创建上传图片的路径，路径必须放在static目录下，否则框架不支持显示图片

我这里创建了uploaded_images子目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>图片展示页面</title>
    <style>
        input[type=submit] {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        input[type=submit]:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <h1>图片展示页面</h1>
    <div>
        <img src='../static/uploaded_images/{{ filename }}'  alt='{{ filename }}'>
    </div>
    <a href="{{ url_for('upload') }}">上传图片</a>

</body>
</html>

uploade.html上传图片页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
    <style>
        input[type=submit]{
            background-color: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        input[type=submit]:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <h1>图片上传</h1>
    <form action="{{ url_for('upload') }}" method="post" enctype=multipart/form-data>
          <input type=file name=image>
          <input type=submit value=上传>
    </form>
</body>
</html>

可支持使用mysql数据库存储图片绝对路径

需要创建表

CREATE TABLE images (image_path VARCHAR(255));

之后运行访问：

选择上传

点击上传后显示如下

项目目录保存有图片

数据库使用需要打开如下注释

# save_to_db(filename)  # 将文件路径存储到数据库中

运行后可在数据库中查看到路径

注意：将图片直接保存到数据库可能不是最佳实践，因为这可能会导致数据库大小急剧增长，并可能影响查询性能。在大多数情况下，建议将图片保存到文件系统，并在数据库中存储图片的路径或URL。我这里选择的是后者。

xingdiango

关注

14
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用Flask实现本地图片上传和显示，支持mysql存储

注意：将图片直接保存到数据库可能不是最佳实践，因为这可能会导致数据库大小急剧增长，并可能影响查询性能。在大多数情况下，建议将图片保存到文件系统，并在数据库中存储图片的路径或URL。要使用FLask框架实现图片上传和显示，首先需要创建Flask框架的项目（使用pycharm专业版）需要创建上传图片的路径，路径必须放在static目录下，否则框架不支持显示图片。需要在templates目录下创建两个html，一个用来上传，一个用来显示。uploade.html上传图片页面。运行后可在数据库中查看到路径。
复制链接

扫一扫