在上篇文章中，我们学习了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等相关文章！
