开始免费使用
当前位置：首页 > Python > Flask Web实现图片上传与显示：两种后端处理方案详解

Flask Web实现图片上传与显示：两种后端处理方案详解

陈默
陈默
发布时间：2026-10-16| 11人浏览过
原创

本文介绍在Flask框架下实现图片上传及前端显示的两种方法。方法一通过保存文件后渲染模板显示图片；方法二直接读取文件流并返回响应。文章包含完整的后端Python代码、前端HTML表单及目录结构说明，端口默认设置为8987，适用于本地及服务器部署。

在Flask Web应用中获取并处理上传的图像Image，实现读取与使用功能。

展示图片上传的用户界面。

后端处理逻辑实现。

@app.route('/upload')
def upload_test():
    return render_template('new.html')

前端页面文件：new.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
        <div>
            <form method="post" action="http://localhost:6600/up_photo" enctype="multipart/form-data">
            <input type="file" size="30" name="photo"/>
            <br>
<!--            <input type="text" class="txt_input" name="name" style="margin-top:15px;"/>-->
            <input type="submit" value="提交信息" class="button-new" style="margin-top:15px;"/>
            </form>
        </div>
    </body>
</html>

后端处理图片上传的核心代码。

后端代码说明。

通过***stream获取图像文件数据，注意代码中['photo']键名需与前端的name="photo"属性保持一致。

@app.route('/up_photo', methods=['post'])
def up_photo():
    img1 = request.files['photo']
    print(type(img1))

    img = Image.open(img1.stream)


	# 保存图片
    img1.save(file_path)

Flask实现本地图片上传并在网页上直接显示。

利用Flask将远程图片上传至服务器，并将获取到的图片展示在前端页面上。

第一种实现方法。

项目目录结构如下：

  • 'static/images' 文件夹用于存储用户上传的图片文件。
  • 'templates’文件夹内包含两个HTML文件，用于定义显示页面。
  • upload_pictures.py 是主要的工程代码文件。

'static/images' 文件夹用于存放上传的图片，'templates'文件夹下的两个HTML文件定义显示页面，upload_pictures.py 是工程代码。

upload_pictures.py 代码实现如下：

# coding:utf-8
 
from flask import Flask, render_template, request, redirect, url_for, make_response,jsonify
from werkzeug.utils import secure_filename
import os
import cv2
import time
 
from datetime import timedelta
 
#设置允许的文件格式
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'bmp'])
 
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
 
app = Flask(__name__)
# 设置静态文件缓存过期时间
app.send_file_max_age_default = timedelta(seconds=1)
 
 
# @app.route('/upload', methods=['POST', 'GET'])
@app.route('/upload', methods=['POST', 'GET'])  # 添加路由
def upload():
    if request.method == 'POST':
        f = request.files['file']
 
        if not (f and allowed_file(f.filename)):
            return jsonify({"error": 1001, "msg": "请检查上传的图片类型，仅限于png、PNG、jpg、JPG、bmp"})
 
        user_input = request.form.get("name")
 
        basepath = os.path.dirname(__file__)  # 当前文件所在路径
 
        upload_path = os.path.join(basepath, 'static/images', secure_filename(f.filename))  # 注意：没有的文件夹一定要先创建，不然会提示没有该路径
        # upload_path = os.path.join(basepath, 'static/images','test.jpg')  #注意：没有的文件夹一定要先创建，不然会提示没有该路径
        f.save(upload_path)
 
        # 使用Opencv转换一下图片格式和名称
        img = cv2.imread(upload_path)
        cv2.imwrite(os.path.join(basepath, 'static/images', 'test.jpg'), img)
 
        return render_template('upload_ok.html',userinput=user_input,val1=time.time())
 
    return render_template('upload.html')
 
 
if __name__ == '__main__':
    # app.debug = True
    app.run(host='0.0.0.0', port=8987, debug=True)

upload.html 文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask上传图片演示</title>
</head>
<body>
    <h1>使用Flask上传本地图片并显示示例一</h1>
    <form action="" enctype='multipart/form-data' method='POST'>
        <input type="file" name="file" style="margin-top:20px;"/>
        <br>
        <i>请输入你当前的心情（开心、超开心、超超开心）：</i>
        <input type="text" class="txt_input" name="name"  value="超超开心" style="margin-top:10px;"/>
        <input type="submit" value="上传" class="button-new" style="margin-top:15px;"/>
    </form>
</body>
</html>

upload_ok.html文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask上传图片演示</title>
</head>
<body>
    <h1>使用Flask上传本地图片并显示示例一</h1>
    <form action="" enctype='multipart/form-data' method='POST'>
        <input type="file" name="file" style="margin-top:20px;"/>
        <br>
        <i>请输入你当前的心情（开心、超开心、超超开心）：</i>
        <input type="text" class="txt_input" name="name"  value="超超开心" style="margin-top:10px;"/>
        <input type="submit" value="上传" class="button-new" style="margin-top:15px;"/>
    </form>
    <h1>阁下的心情是：{{userinput}}！</h1>
    <img src="{{ url_for('static', filename= './images/test.jpg',_t=val1) }}" width="400" height="400" alt="你的图片被外星人劫持了～～"/>
</body>
</html>

直接运行 python upload_pictures.py 启动服务，代码中定义了端口号8987。在本机浏览器访问 '127.0.0.1:8987/upload'，即可看到以下界面：

点击'浏览'按钮选择并上传文件后，上传的图片将保存到 ‘static/images'目录下，显示结果如下：

第二种实现方法。

目录结构：

目录文件介绍同方法一。

upload_pictures.py 代码：

# coding:utf-8
 
from flask import Flask,render_template,request,redirect,url_for,make_response,jsonify
from werkzeug.utils import secure_filename
import os
import cv2
 
from datetime import timedelta
 
#设置允许的文件格式
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'bmp'])
 
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
 
app = Flask(__name__)
# 设置静态文件缓存过期时间
app.send_file_max_age_default = timedelta(seconds=1)
 
@app.route('/upload', methods=['POST', 'GET'])  # 添加路由
def upload():
    if request.method == 'POST':
        f = request.files['file']
 
        if not (f and allowed_file(f.filename)):
            return jsonify({"error": 1001, "msg": "请检查上传的图片类型，仅限于png、PNG、jpg、JPG、bmp"})
 
        user_input = request.form.get("name")
 
        basepath = os.path.dirname(__file__)  # 当前文件所在路径
 
        upload_path = os.path.join(basepath, 'static/images',secure_filename(f.filename))  #注意：没有的文件夹一定要先创建，不然会提示没有该路径
        f.save(upload_path)
 
        image_data = open(upload_path, "rb").read()
        response = make_response(image_data)
        response.headers['Content-Type'] = 'image/png'
        return response
 
    return render_template('upload.html')
 
if __name__ == '__main__':
    # app.debug = True
    app.run(host = '0.0.0.0',port = 8987,debug= True)

upload.html 文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask上传图片演示</title>
</head>
<body>
    <h1>使用Flask上传本地图片并显示示例二</h1>
    <form action="" enctype='multipart/form-data' method='POST'>
        <input type="file" name="file" style="margin-top:20px;"/>
        <br>
        <i>请输入你当前的心情（开心、超开心、超超开心）：</i>
        <input type="text" class="txt_input" name="name"  value="超超开心" style="margin-top:10px;"/>
        <input type="submit" value="上传" class="button-new" style="margin-top:15px;"/>
    </form>
</body>
</html>

运行 python upload_pictures.py ，端口号定义的是8987，在本机上访问 '127.0.0.1:8987/upload' ，出现以下界面：

点击'浏览' 并上传后，上传的图片保存到了 ‘static/images'目录下，显示结果：

方法二显示出来的图片覆盖了整个页面。

tips： 如果是在其他机器上访问，把127.0.0.1的IP换成服务器的IP就行了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

相关文章

相关标签: Python Flask Web开发 图像处理

免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。

作者最新文章

全部文章

Python 相关产品和应用

全部下载
PythonSelenium
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。

Python机器学习
scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。

Python代码质量
Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。

Python代码质量
Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。

Pythonpytest
pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。

PythonFastAPI
FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架，支持类型提示和自动接口文档。

PythonFlask
Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。

PythonDjango
Django

Django

6.1.2 · Windows

成熟的 Python Web 框架，适合构建内容站点和业务系统。

PythonSpyder
Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。

PythonSciPy
SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。