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遠(yuǎn)程上傳圖片到服務(wù)器，并把獲取到的圖片顯示到前端頁面上。

方法一

目錄結(jié)構(gòu)：

'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
 
#設(shè)置允許的文件格式
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__)
# 設(shè)置靜態(tài)文件緩存過期時間
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__)  # 當(dāng)前文件所在路徑
 
        upload_path = os.path.join(basepath, 'static/images', secure_filename(f.filename))  # 注意：沒有的文件夾一定要先創(chuàng)建，不然會提示沒有該路徑
        # upload_path = os.path.join(basepath, 'static/images','test.jpg')  #注意：沒有的文件夾一定要先創(chuàng)建，不然會提示沒有該路徑
        f.save(upload_path)
 
        # 使用Opencv轉(zhuǎn)換一下圖片格式和名稱
        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>請輸入你當(dāng)前的心情（開心、超開心、超超開心）：</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>請輸入你當(dāng)前的心情（開心、超開心、超超開心）：</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' ，出現(xiàn)以下界面：

點擊'瀏覽' 并上傳后，上傳的圖片保存到了 ‘static/images'目錄下，顯示結(jié)果：

方法二

目錄結(jié)構(gòu)：

目錄文件介紹同方法一。

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
 
#設(shè)置允許的文件格式
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__)
# 設(shè)置靜態(tài)文件緩存過期時間
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__)  # 當(dāng)前文件所在路徑
 
        upload_path = os.path.join(basepath, 'static/images',secure_filename(f.filename))  #注意：沒有的文件夾一定要先創(chuàng)建，不然會提示沒有該路徑
        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>請輸入你當(dāng)前的心情（開心、超開心、超超開心）：</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' ，出現(xiàn)以下界面：