Flask 上传自定义头像的实例详解


Posted in Python onJanuary 09, 2020

Flask Web 开发这本书基本上做完了,后面还需要温习,但是自己做的博客总觉得简陋了点,所以,在动脑子开发新功能

今天想到最基本的功能,自定义头像

那这样的功能,设计到2大基本功能块

1:如何进行文件的上传和保存

2:如何在用户模型里面将头像照片和用户挂钩起来

第二个问题我在查阅了网上的讨论后,得出基本上2种方法,

第一种是将图片变成二进制以后存入数据库

第二种是将图片直接存放于文件系统中

先研究如何上传文件成功这个事情

从最简单的开始

在main的views文件内,添加以下准备工作

import os
from flask import Flask, request, redirect, url_for
 
UPLOAD_FOLDER=r'E:\flasky\app\upload'

设置UPLOAD_FOLDER的路径,表示文件最终要存在哪一个位置

@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
 
#...
 if request.method == 'POST':
 file = request.files['file']
 file.save(os.path.join(UPLOAD_FOLDER,file.filename))
 return '<p>success</p>'
 return '''
 <!DOCTYPE html>
 <title>Change new icon</title>
 <h1>Upload new </h1>
 <form action = "" method = "post" enctype=multipart/form-data>
 <input type = "file" name = file>
 <input type = "submit" value = Upload>
 </form>
 '''

然后为上传文件功能单独做一个路由,是专门用一个页面来提供上传文件

file=request.files['file']表示,从request请求的files字典中,取出file对应的文件。这个文件是一个FileStorage对象,这个我们后面再讲

这个文件对象拥有一个函数功能来保存文件,叫做save()

这个文件对象还拥有一个属性来提取文件名,叫做filename

他的参数就是路径名称

如上面代码,我用了os.path.join拼接的方法来做出保存路径名

至于提交保存以后的返回页面,我先简单做了一个 显示 success的页面表示功能成功

而整个页面的渲染,直接在return里面写入了这个表单,我们来看看功能

PS: 在用户资料页面,我已经加入了按钮来通向更改头像的页面,这个就不多说了

Flask 上传自定义头像的实例详解

Flask 上传自定义头像的实例详解

好,最重要的一环节上传文件已经完成了,接下来的工作就是对代码的完善了

比如,添加指定允许文件类型的范围

ALLOWED_EXTENSIONS=set(['txt','pdf','png','jpg','jpeg','gif'])

于是乎,代码变成了

UPLOAD_FOLDER=r'E:\flasky\app\upload'
ALLOWED_EXTENSIONS=set(['txt','pdf','png','jpg','jpeg','gif'])
 
def allowed_file(filename):
 return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS
 
@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
 if request.method == 'POST':
 file = request.files['file']
 if file and allowed_file(file.filename):
 file.save(os.path.join(UPLOAD_FOLDER,file.filename))
 return '<p>success</p>'
 return '<p> 你上传了不允许的文件类型 </p>'
 return '''
 <!DOCTYPE html>
 <title>Change new icon</title>
 <h1>Upload new </h1>
 <form action = "" method = "post" enctype=multipart/form-data>
 <input type = "file" name = file>
 <input type = "submit" value = Upload>
 </form>
 '''

好,讲到这里,就要回过头来看看Flask官方文档的说明了

首先第一点,request的files属性

Flask 上传自定义头像的实例详解

所以说,非常方便,可以通过file.filename ,直接获取文件的名字

另外,这个文件对象,可以直接用save功能储存,2可以有2个参数,一个是dst表示存放路径,第二个是缓存尺寸,表示在存储过程中的大小,默认16kb。

我们来看下效果,我们用MP3后缀名的文件来进行测试

我在检测到是不允许的文件类型时,返回写了一句提示

Flask 上传自定义头像的实例详解

接着,我们要再讲一个功能 secure_filename(),他是防止用于起一些可以影响到系统运行的文件名,来扰乱你的网站

比如如官方文档所说的

Flask 上传自定义头像的实例详解

再来看下这个函数的功能,其实他为了保证文件名不会影响到系统,他就把文件名里面的斜杠和空格,替换成了下划线

这样,就保证了文件只会在当前目录使用,而不会由于路径问题被利用去做其他事情。

Flask 上传自定义头像的实例详解

所以,在储存文件之前,通过这个函数把文件名先修改一下

@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
 if request.method == 'POST':
 file = request.files['file']
 if file and allowed_file(file.filename):
 filename = secure_filename(file.filename)
 file.save(os.path.join(UPLOAD_FOLDER,filename))
 return '<p>success</p>'
 return '<p> 你上传了不允许的文件类型 </p>'
 return '''
 <!DOCTYPE html>
 <title>Change new icon</title>
 <h1>Upload new </h1>
 <form action = "" method = "post" enctype=multipart/form-data>
 <input type = "file" name = file>
 <input type = "submit" value = Upload>
 </form>
 '''

我们再来测试下功能

Flask 上传自定义头像的实例详解

最后,还有一个功能,就是立即查看已经刚刚上传的文件

我这里创建了一个jpg图像文件

这里需要用到的函数是send_from_directory

Flask 上传自定义头像的实例详解

我们将上传的代码再次修改一下,变成上传完以后立刻预览

UPLOAD_FOLDER=r'E:\flasky\app\upload'
ALLOWED_EXTENSIONS=set(['txt','pdf','png','jpg','jpeg','gif'])
 
def allowed_file(filename):
 return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS
 
@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
 if request.method == 'POST':
 file = request.files['file']
 if file and allowed_file(file.filename):
 filename = secure_filename(file.filename)
 file.save(os.path.join(UPLOAD_FOLDER,filename))
 return redirect(url_for('.uploaded_file',filename=filename))  #跳转到预览页面
 return '<p> 你上传了不允许的文件类型 </p>'
 return '''
 <!DOCTYPE html>
 <title>Change new icon</title>
 <h1>Upload new </h1>
 <form action = "" method = "post" enctype=multipart/form-data>
 <input type = "file" name = file>
 <input type = "submit" value = Upload>
 </form>
 '''
 
@main.route('/uploaded_file/<filename>')
def uploaded_file(filename):
 return send_from_directory(UPLOAD_FOLDER,filename)

我创建了一张t.jpg的图片,里面用文本框写了一句话,也就是下面预览里面看到的

Flask 上传自定义头像的实例详解

到这里为止,基本的上传和预览功能就实现了,后面还要再和用户头像挂钩,还得再动动脑子。

以上这篇Flask 上传自定义头像的实例详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
跟老齐学Python之dict()的操作方法
Sep 24 Python
Python中的匿名函数使用简介
Apr 27 Python
Python运行报错UnicodeDecodeError的解决方法
Jun 07 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
Feb 10 Python
解决Python print 输出文本显示 gbk 编码错误问题
Jul 13 Python
python采集微信公众号文章
Dec 20 Python
pyqt5 键盘监听按下enter 就登陆的实例
Jun 25 Python
django 文件上传功能的相关实例代码(简单易懂)
Jan 22 Python
python 实现分组求和与分组累加求和代码
May 18 Python
python3.7+selenium模拟淘宝登录功能的实现
May 26 Python
pytorch MSELoss计算平均的实现方法
May 12 Python
Python循环之while无限迭代
Apr 30 Python
flask 实现上传图片并缩放作为头像的例子
Jan 09 #Python
python中如何使用insert函数
Jan 09 #Python
Python Pillow.Image 图像保存和参数选择方式
Jan 09 #Python
python 解决flask 图片在线浏览或者直接下载的问题
Jan 09 #Python
Django密码存储策略分析
Jan 09 #Python
python 实现Flask中返回图片流给前端展示
Jan 09 #Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
Jan 09 #Python
You might like
php生成略缩图代码
2012/07/16 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
JS实现骰子3D旋转效果
2019/10/24 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python opencv实现证件照换底功能
2019/08/19 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
服装厂厂长职责
2013/12/16 职场文书
经典公益广告词
2014/03/13 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2014年就业工作总结
2014/11/26 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android