【Flask基础】三，获取与保存前端模板数据（request+上传文件保存）

一，读取前端请求数据

# coding:utf-8
from flask import Flask, request

app = Flask(__name__)

"""
    前端请求数据：
    属性             说明                    类型
    data      json格式请求的数据（POST）
    form      请求的表单数据(POST)            字典
    args      请求url中的数据（GET）          字典
    cookies       请求的cookies信息           字典
    headers          请求报文头
    method           请求方式                 GET/POST
    url             请求的url地址             string
    files            上传的文件
    path            用户的请求路径            /login
    
"""

@app.route("/index", methods=["GET", "POST"])
def index():
    # request中包含了前端发送过来的所有请求数据
    # form和data是用来提取请求体数据，无法获取url中的数据（类似于GET请求方式的数据），只能获取POST形式的表单数据
    # 通过requset.form可以直接提取请求体中的表单格式的数据， 是一个类字典的对象
    # 通过get方法只能拿到多个同名参数的第一个
    
    ## 【form--POST 方式获取前端请求数据】
    name = request.form.get("name")
    age = request.form.get("age")
    name_li = request.form.getlist("name")
    city1 = request.form.getlist("city")

    # 如果是请求体的数据不是表单格式的（如json格式），可以通过request.data获取
    ## POST的raw形式的数据从data中获取
    print("request.data: %s" % request.data)

    ## 【args--GET 方式获取前端请求数据】
    # args是用来提取url中的参数（查询字符串）
    city2 = request.args.get("city")
    return "hello name=%s, age=%s, city1=%s,city2 = %s, name_li=%s" % (name, age, city1,city2, name_li)
    #hello name=song, age=16, city1=['美国'],city2 = 中国, name_li=['song', 'fengchunmeng']


if __name__ == '__main__':
    app.run(debug=True)

二，保存上传文件（前端+后端）

1.简单保存演示（无前端）

# coding:utf-8
from flask import Flask, request

app = Flask(__name__)

@app.route("/upload", methods=["POST"])
def upload():
    """接受前端传送过来的文件"""
    file_obj = request.files.get("pic")
    if file_obj is None:
        # 表示没有发送文件
        return "未上传文件"

    # 【保存方法一--直接保存】将文件保存到本地
    # 1. 创建一个文件
    f = open("./demo.png", "wb")
    # 2. 向文件写内容
    data = file_obj.read()
    print(data)
    f.write(data)
    # 3. 关闭文件
    f.close()

    # 【保存方式二--使用上下文管理器方式保存】
    with open("./demo.png", "wb") as f:
        data = file_obj.read()
        f.write(data)


    #【保存方法三--使用预设方法保存】
    # 直接使用上传的文件对象保存
    file_obj.save("./demo1.jpg")
    return "上传成功"

if __name__ == '__main__':
    app.run(debug=True)

2.文件上传保存（前端+后端）

• 前端控件

<!-- 必须要设置表单的enctype属性为multipart/form-data，表示文件上传
     同时表单元素必须指定name属性，供后台接口获取其数据 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>


<!--原生js方式上传，会跳转页面---不推荐-->
<!--<form action="/upload" method="post" enctype="multipart/form-data">-->
<!--    <input type="text" name="headline"/>-->
<!--    <textarea name="content"></textarea>-->
<!--    <input type="file" name="upfile" />    &lt;!&ndash; 文件上传控件 &ndash;&gt;-->
<!--    &lt;!&ndash; 按钮类型必须为submit才能提交表单 &ndash;&gt;-->
<!--    <input type="submit" value="开始上传" />-->
<!--</form>-->


<!--Ajax上传方式，不会跳转页面--主流上传文件方法-->
<input type="text" id="headline"/>
<textarea id="content"></textarea>
<input type="file" id="upfile" />    <!-- 文件上传控件 -->
<button onclick="doUpload()">上传</button>


<script>
    function doUpload() {
        var data = new FormData();	// 带附件上传
        data.append("headline",$.trim($("#headline").val()));
        data.append("content",$.trim($("#content").val()));
        <!-- 此处为JavaScript添加文件的方式 -->
        data.append("upfile",$("#upfile").prop("files")[0]);

        $.ajax({
            url: '/upload',
            type: 'POST',
            data: data,     // 指定上传数据
            cache: false,
            processData: false,
            contentType: false,
            success : function(result) {
                if(result == "Done"){
                    window.alert('恭喜你,上传成功.');
                }else if (result == 'Invalid') {
                    window.alert('文件类型不匹配.');
                }
            },
            error : function(responseStr) {
                window.alert('上传失败');
            }
        });
    }
</script>

• 后端接口

from flask import Flask,render_template,request

app = Flask(__name__, template_folder='templates', static_url_path='/', static_folder='resource')

@app.route('/')
def pre_upload():
    return render_template('文件上传.html')

@app.route('/upload', methods=['POST'])
def do_upload():
    headline = request.form.get('headline')
    content = request.form.get('content')
    file = request.files.get('upfile')
    print(headline, content)  # 可以正常获取表单元素的值

    suffix = file.filename.split('.')[-1]  # 取得文件的后缀名
    # 也可以根据文件的后缀名对文件类型进行过滤，如：
    if suffix.lower() not in ['jpg', 'jpeg', 'png', 'rar', 'zip', 'doc', 'docx']:
        return 'Invalid'

    # 将文件保存到某个目录中
    # file.save('D:/test001.' + suffix)
    file.save('./文件上传测试/test001.' + suffix)
    return 'Done'

if __name__ == '__main__':
    app.run(debug=True)