3.4 文件上传_Flask Web开发入门、进阶与实战-QQ阅读男频武侠网

上QQ阅读APP看书，第一时间看更新

3.4 文件上传

在Flask Web程序中，实现文件上传系统的方法非常简单，与传递GET或POST参数十分相似。基本流程如下所示。

1）将在客户端上传的文件保存在flask.request.files对象中。

2）使用flask.request.files对象获取上传来的文件名和文件对象。

3）调用文件对象中的方法save()将文件保存到指定的目录中。

3.4.1 简易文件上传程序

在下面的实例中，演示了在Flask框架中实现文件上传的过程。

源码路径：daima\3\3-4\up\

1）编写实例文件flask5.py，定义一个实现文件上传功能的函数upload()，能够同时处理GET请求和POST请求。其中将GET请求返回到上传页面，获得POST请求时获取上传文件，并保存到当前的目录下。文件flask5.py的具体实现代码如下所示。

2）模板文件upload.html实现一个文件上传表单界面，具体实现代码如下所示。

当在浏览器中输入“http://127.0.0.1:5000/upload”运行时，显示一个文件上传表单界面，效果如图3-10所示。单击“浏览”按钮可以选择一个要上传的文件，单击“上传”按钮后会上传这个文件，并显示上传成功的提示，执行效果如图3-11所示。

图3-10 执行效果

图3-11 显示上传成功提示

3.4.2 查看上传的图片

在下面的实例中，演示了在Flask Web程序中上传图片并浏览上传图片的过程。

源码路径：daima\3\3-4\fuza\

1）编写程序文件fuza.py，主要实现代码如下所示。

• 方法settings()：调用模板文件upload.html显示上传表单，然后获取表单中的上传信息，并将上传文件保存到images目录中。

• 方法get_image：浏览显示上传的图片。

2）在模板文件upload.html中实现一个上传表单界面，具体实现代码如下所示。

执行程序，输入“http://127.0.0.1:5000/upload/”后会显示一个上传表单，可以上传普通的文本文件和图片文件，如图3-12所示。如果上传的是图片文件，则可以通过“http://127.0.0.1:5000/images/文件名”的方式浏览这幅图片。

图3-12 上传表单界面

3.4.3 使用Flask-WTF实现文件上传

通过使用Flask-WTF扩展，可以利用其内置的表单元素快速实现文件上传系统。在下面的实例中，演示了在Flask Web程序中实现文件上传系统的过程，使用Flask-WTF验证过滤上传文件的格式。

源码路径：daima\3\3-4\yanzheng\

1）编写文件forms.py，使用Flask-WTF中的表单元素设置允许上传文件的格式，具体实现代码如下所示。

2）编写程序文件upload_file_demo.py，主要实现代码如下所示。

• UP LOAD_P ATH：保存上传文件的路径。

• 方法settings()：使用方法render_template渲染模板文件，获取上传表单。获取在UploadForm中设置的文件类型，使用CombinedMultiDict将表单中的form和file的数据进行验证。如果表单中的数据符合在UploadForm中设置的要求，则将上传文件保存到images目录中。

• 方法get_image：浏览显示上传的图片。

执行程序，输入“http://127.0.0.1:5000/upload/”后会显示一个上传表单，只能上传jpg、png和gif这3种格式的图片文件，如图3-13所示。如果上传的文件类型符合要求，则可以通过“http://127.0.0.1:5000/images/文件名”的方式浏览这幅图片。