Flask+Html 上传图片文件（附完整代码和项目工程）

完整工程已上传到github上，其中的FlaskServer就是其完整的代码。https://github.com/hrdhrdhrdhrd/okhttpFlaskDemo，；AndroidClient则是通过okhttp写的一个安卓app，并上传图片到FlaskServer服务器中，详情见另一篇文章。操作新建一个Flask工程，在static文件夹下新建一个images文件夹te...

nodrin

7347人浏览 · 2019-06-06 14:59:46

nodrin · 2019-06-06 14:59:46 发布

操作

新建一个Flask工程，在static文件夹下新建一个images文件夹
templates文件夹下创建upload.html、upload_ok.hml文件

FlaskServer.py 程序

from flask import Flask, render_template, request, jsonify
from werkzeug.utils import secure_filename
from datetime import timedelta
import os

app = Flask(__name__)

# 输出
@app.route('/')
def hello_world():
    return 'Hello World!'

# 设置允许的文件格式
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'bmp'])
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

# 设置静态文件缓存过期时间
app.send_file_max_age_default = timedelta(seconds=1)

# 添加路由
@app.route('/upload', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        # 通过file标签获取文件
        f = request.files['file']
        if not (f and allowed_file(f.filename)):
            return jsonify({"error": 1001, "msg": "图片类型：png、PNG、jpg、JPG、bmp"})
        # 当前文件所在路径
        basepath = os.path.dirname(__file__)
        # 一定要先创建该文件夹，不然会提示没有该路径
        upload_path = os.path.join(basepath, 'static/images', secure_filename(f.filename))
        # 保存文件
        f.save(upload_path)
        # 返回上传成功界面
        return render_template('upload_ok.html')
    # 重新返回上传界面
    return render_template('upload.html')

if __name__ == '__main__':
    app.run(host="0.0.0.0")

upload.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask网页上传图片演示</title>
</head>
<body>
    <form action="http://10.1.12.47:5000/upload" enctype='multipart/form-data' method='POST'>
        <input type="file" name="file" style="margin-top:20px;"/>
        <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>上传成功</h1>
    <!--<img src="../static/images/1.png" width="400" height="400" alt="not found"/>-->
</body>
</html>

测试

upload.html界面
upload_ok.html界面
服务器界面，图片保存成功

完整工程

已上传到github上，其中的FlaskServer就是其完整的代码。https://github.com/hrdhrdhrdhrd/okhttpFlaskDemo
AndroidClient则是通过okhttp写的一个安卓app，并上传图片到FlaskServer服务器中，详情见另一篇文章，https://blog.csdn.net/qq_26906345/article/details/91045074