Flask框架——Flask-WTF表单：文件上传、验证码

作者: 白巧克力LIN | 来源:发表于2022-07-24 11:46 被阅读0次

在上篇文章中，我们学习了Flask框架——Flask-WTF表单：数据验证、CSRF保护，这篇文章我们学习Flask框架——Flask-WTF表单：文件上传、验证码。

文件上传

Flask-WTF表单提供FileField字段来处理文件上传，它在表单提交后，自动从flask.request.files中抽取数据。

示例代码如下所示：

import os
from flask import Flask, render_template
from flask_wtf import FlaskForm, CSRFProtect
from flask_wtf.file import FileField, FileRequired, FileAllowed

app = Flask(__name__)
app.config['SECRET_KEY']='hakhfaskh'      #配置CSRF需要的密钥，其值是任意的       
csrf = CSRFProtect(app)          #将CSRF保护加入到app中

class Myform(FlaskForm):
    file = FileField(label='用户头像上传',validators=[FileRequired(), FileAllowed(['jpg','png'])])   #创建FileField字段

@app.route('/',methods=['GET','POST'])
def hello_world():
    myform = Myform()         #创建表单对象
    if myform.validate_on_submit():          #检查是否是一个POST请求并且请求是否有效
        filename=myform.file.data.filename    #获取传入的文件名
        filepath=os.path.dirname(os.path.abspath(__file__))       #获取当前项目的文件路径
        savepath=os.path.join(filepath,'static')      #设置保存文件路径        
        myform.file.data.save(os.path.join(savepath,filename))    #保存文件
        return '提交成功'
    return render_template('file.html', myform=myform)  #使用render_template()方法渲染file.html文件并将myform传递到file.html中

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

配置CSRF需要的密钥并将CSRF保护加入到app中，然后创建名为Myform的表单类，在类中我们定义了FileField文件字段并使用了FileRequired文件验证函数和FileAllowed文件类型验证函数。

在视图函数中创建表单类对象，使用了validate_on_submit()方法检查是否是一个POST请求并且请求是否有效，获取传入的文件名并定义保存文件的路径，最后使用render_template()方法渲染file.html文件并将myform传递到file.html中。

创建名为file.html文件，其内容如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="{{ url_for('hello_world') }}" method="post" enctype="multipart/form-data">
        {{ myform.csrf_token }}     {#渲染csrf#}
        <p>{{ myform.file.label }}{{ myform.file }}</p>
        <input type="submit" value="提交">
    </form>
</body>
</html>

注意：涉及到文件相关的，需要在 HTML 表单的 enctype 设置成 multipart/form-data。

启动flask项目，访问http://127.0.0.1:5000/并选择文件，如下图所示：

验证码

Flask-WTF 通过 RecaptchaField 也提供对验证码的支持，示例代码如下：

from flask import Flask, render_template
from flask_wtf import FlaskForm, RecaptchaField, CSRFProtect

app = Flask(__name__)
app.config['SECRET_KEY']='hakhfaskh'    #配置CSRF需要的密钥，其值是任意的
csrf = CSRFProtect(app)              #将CSRF保护加入到app中

class Myform(FlaskForm):
    recaptcha = RecaptchaField()    #验证码字段

@app.route('/')
def yanzm():
    myform=Myform()         #创建表单对象
    return render_template('yanzm.html', myform=myform)     #使用render_template()方法渲染yanzm.html文件并将myform传递到file.html中

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

配置CSRF需要的密钥并将CSRF保护加入到app中，创建名为Myform的表单类，在类中我们定义了RecaptchaField验证码字段，在视图函数中我们创建表单对象，使用render_template()方法渲染yanzm.html文件并将myform传递到file.html中。

使用验证码还需要配置如下参数：

RECAPTCHA_PUBLIC_KEY：必选，公钥；
RECAPTCHA_PRIVATE_KEY：必选，私钥；
RECAPTCHA_API_SERVER：可选，验证码API服务器；
RECAPTCHA_PARAMETERS：可选，一个JavaScript（api.js）参数的字典；
RECAPTCHA_DATA_ATTRS：可选，一个数据属性项列表 https://developers.google.com/recaptcha/docs/display。

创建名为yanzm.html，其内容如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <form action="/" method="post">
        {{ myform.csrf_token }}
       {{ myform.recaptcha }}
   </form>
</body>
</html>

启动flask项目，访问http://127.0.0.1:5000/，发现什么都没显示，这是因为RecaptchaField()字段需要调用谷歌的验证码API，而调用谷歌的验证码API需要翻墙，我们没有翻墙，所以什么都没显示，如下图所示：

使用RecaptchaField()验证码字段需要翻墙，那么我们就不使用它，我们自己绘制验证码。

这里我们绘制验证码使用pillow图形库，其执行如下代码安装：

pip install pillow

安装好pillow后，我们创建一个名为uitl.py文件，其作用是绘制我们的图形验证码，代码如下：

import random
from PIL import Image, ImageFont, ImageDraw

#自定义get_color方法，获取三位随机数并保存在元组中
def get_color():
    return (random.randint(0,255),random.randint(0,255),random.randint(0,255))

#自定义generate_image方法绘制图片验证码
def generate_image(4):
    size=(130,50)                           #设置验证码的大小
    im=Image.new('RGB',size,color=get_random_color())   #创建验证码背景图
    font=ImageFont.truetype('C:\Windows\Fonts/simsun.ttc',size=40)  #设置验证码字体
    draw=ImageDraw.Draw(im)    #创建ImageDraw对象
    code=''             #设置验证码值
    s='abcdefghijklmnopqrstuvwxyz123456'        #设置验证码的取值范围
    for i in range(4):          #绘制4位数验证码值
        c=random.choice(s)          #随机在s中取值
        code+=c                     #将取到的值放在验证码中
        draw.text((9+random.randint(4,7)+20*i,random.randint(4,7)),text=c,fill=get_random_color(),font=font)    #在验证码背景图中写入验证码值
    im.show()                   
    return im ,code             #返回图片和验证码值

我们自定义get_color方法获取三位随机数保存在元组并返回，再自定义generate_image()方法绘制图片验证码，设置验证码的取值范围、背景图大小字体等，并随机获取验证码值写入验证码背景图中。

大家可以根据pillow库的文档来为验证码增加一些干扰线，这样简易版的图形验证码就制作完毕了，如下图所示：

这里我们是绘制了4个字符的图片验证码，图片验证码代码生成已经写好了，接下来我们编写flask项目来使用验证码，示例代码如下所示：

from flask import Flask, render_template, session
from flask_wtf import FlaskForm, CSRFProtect
from wtforms import StringField, ValidationError

app = Flask(__name__)
app.config['SECRET_KEY']='hakhfaskh'      #配置CSRF需要的密钥，其值是任意的       
csrf = CSRFProtect(app)          #将CSRF保护加入到app中

class Myform(FlaskForm):            #创建表单类
    recaptcha = StringField()           #创建文本字段
    def validate_recaptcha(self, data):         #自定义验证
        input_code=data.data                   #输入的验证码的值
        code=session.get('valid')               #获取session的valid值
        if input_code.lower()!=code.lower():        #验证码值转换为小写并判断输入的验证码和图片验证码值是否一致
            raise ValidationError('验证码错误')      #抛出错误

@app.route('/',methods=['GET','POST'])
def yanzm():
    myform=Myform()                             #创建表单类对象
    if myform.validate_on_submit():             #检查是否是一个POST请求并且请求是否有效
        return '验证成功'
    return render_template('yanzm.html', myform=myform)     #使用render_template()方法渲染yanzm.html文件并将myform传递到file.html中

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

设置CSRF保护，创建表单类使用StringField()文本字段并自定义验证函数，然后在视图函数中创建表单类对象，使用validate_on_submit()方法检查是否是一个POST请求并且请求是否有效，使用render_template()方法渲染yanzm.html文件并将myform传递到file.html中。

是不是这样就可以了呢？这里我们还需要创建一个视图函数来获取图片验证码，代码如下所示：

from util import generate_image         #导入刚才编写的绘制验证码中的generate_image
@app.route('/image')
def get_image():
    im,code=generate_image()    #获取验证码图片与值
    buffer=BytesIO()            #将image对象转成二进制
    im.save(buffer,"JPEG")      #以二进制形式保存为JPEG格式
    buf_bytes=buffer.getvalue()     #读取二进制验证码
    session['valid']=code       #保存到session中，控制验证码的失效时间
    response=make_response(buf_bytes)       #构造response对象
    response.headers['Content-Type']='image/jpg'    #定制请求头
    return response

在视图函数中，我们通过调用generate_image()方法来获取验证码图片与值并将图片以二进制形式保存为JPEG格式，由于一般情况下验证码是有失效时间的，所以我们使用session控制验证码的实现时间，使用make_response()构造response对象为验证码图片定制请求头。

接下来我们编写yanzm.html文件，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <form action="/" method="post">
        {{ myform.csrf_token }}     {#渲染csrf#}
       {{ myform.recaptcha }}<img src="{{ url_for('get_image') }}" alt="" id="img">
        <p>{{ myform.recaptcha.errors.0 }}</p>
        <input type="submit" value="提交">
   </form>
</body>
</html>

一般情况下，只要我们点击图片验证码就会刷新，所以我们可以加入以下代码来控制图片验证码的刷新：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $('#img').click(function (){
        $(this).attr('src',"{{ url_for('get_image') }}?ran="+Math.random());
    })
</script>

这里我们调用了百度的jquery并为验证码添加了点击事件。

好了，这样就成功绘制了我们的图片验证码了，启动flask项目，访问http://127.0.0.1:5000/，如下图所示：

当我们正确输入时并点击提交，就会显示验证成功，当我们错误输入并点击提交，就会显示验证码错误。

好了，Flask框架——Flask-WTF表单：文件上传、验证码就讲到这里了，感谢观看，下篇文章学习Flask框架——Flask-Mail邮件。

公众号：白巧克力LIN

该公众号发布Python、数据库、Linux、Flask、自动化测试、Git等相关文章！

Flask框架——Flask-WTF表单：文件上传、验证码

文件上传

验证码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web开发——Flask框架

待看