Flask web上传获取图像Image读取并使用方式

更新时间：2022年11月28日 10:01:35 作者：loong_XL

这篇文章主要介绍了Flask web上传获取图像Image读取并使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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就行了。

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

您可能感兴趣的文章:

在django中查询获取数据,get, filter,all(),values()操作
这篇文章主要介绍了在django中查询获取数据,get, filter,all(),values()操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
在Django中管理Users和Permissions以及Groups的方法
这篇文章主要介绍了在Django中管理Users和Permissions以及Groups的方法,Django是最具人气的Python web开发框架,需要的朋友可以参考下
2015-07-07
python接口自动化如何封装获取常量的类
这篇文章主要介绍了python接口自动化如何封装获取常量的类,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
python中的opencv 图像梯度
这篇文章主要介绍了python中的opencv 图像梯度，图像梯度计算的是图像变化的速度，图像梯度计算需要求导数，但是图像梯度一般通过计算像素值的差来得到梯度的近似值，下文详细介绍需要的小伙伴可以参考一下
2022-06-06
Python使用Matplotlib进行图案填充和边缘颜色分离的三种方法
Matplotlib是Python中功能强大的绘图库,允许广泛的自定义选项,一个常见的要求是分离出图中的图案填充和边缘颜色,默认情况下,Matplotlib中的填充颜色与边缘颜色相关联,但有一些方法可以独立自定义这些颜色,本文将深入研究如何实现这一点的技术细节,并提供分步说明和示例
2025-01-01
基于PyQt5完成pdf转word功能
本文介绍的pdf转word功能还有一些待完善地方，例如可增加预览功能，实现每页预览，当然我们可以在后续阶段逐渐完善，对基于PyQt5完成的pdf转word功能感兴趣的朋友一起看看吧
2022-06-06
详解Python3定时器任务代码
这篇文章主要介绍了Python3定时器任务代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
控制Python浮点数输出位数的操作方法
在python的输出结果中，尤其是浮点数的输出，当我们需要写入文本文件时，最好是采用统一的输出格式，这样也能够增强结果的可读性，这篇文章主要介绍了控制Python浮点数输出位数的方法,需要的朋友可以参考下
2022-04-04
Python通过类的组合模拟街道红绿灯
这篇文章主要介绍了Python通过类的组合模拟街道红绿灯,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
PyQt5 对图片进行缩放的实例
今天小编就为大家分享一篇PyQt5 对图片进行缩放的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-06-06