Flask blog实战---上传头像功能

第一步:数据库的表单中新增用户头像这一字段models.py中

第二步:在编辑资料的表单中增加头像上传,

avatar = FileField(‘头像‘)

第三步:在编辑资料的路由界面,添加用户提交头像的功能,参考博客 http://ncitycode.com/python/flask/2016/6/18/

UPLOAD_FOLDER = current_app.config[‘UPLOAD_FOLDER‘]  这里我在config.py中设置的文件上传路径为

将数据库中头像存储的路径修改为

到这里,上传头像的功能就完成了,能通过页面直接上传头像

第四步:

如果你只完成了上述的三步,上传头像能成功,数据库中也会有路径的数据,但是界面会报错,因为你的前端页面中,没有修改显示

这里我在user.html中修改了显示  如果没有上传头像,就显示一个默认头像,上传了头像的就直接显示自己头像。

还有一些其他的页面也需要做相同的修改,这里就不一一指出,自己去测试吧!但是有一个页面不一样,那就是_post.html页面,

这里需要增加一个判断,博客的发布者是否有头像。

到这里,功能基本完成了 ,一起折腾吧!骚年。

项目源码:

https://github.com/627886474/Flask

时间: 2024-08-06 16:50:25

Flask blog实战---上传头像功能的相关文章

完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)

现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到以下要解决的问题: (1)调用摄像头,捕获摄像头采集的视频,并将采集的视频绘制到UI上. (2)从图片文件读取Image,并显示在控件上(这个相当easy). (3)在显示的视频或图片上,能够拖动一个正方形,以选择指定部分的区域作为自己的头像. (4)从视频中截获一帧保存为图片. (5)从图片中截取

php实现手机拍照上传头像功能

现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ['HTTP_RAW_POST_DATA'],这个系统函数跟post很相似,但是$GLOBALS ['HTTP_RAW_POST_DATA']支持的数据格式更丰富些,详细的区别请自己百度谷歌. 设计流程就是: $GLOBALS ['HTTP_RAW_POST_DATA']传递照片数据流(二进制)--

Android Studio第四十期 - 上传头像功能支持权限管理

代码已经整理好,加了权限管理和SP保存上传服务器的方法,希望能够帮到大家~效果如下图: 地址:https://github.com/geeklx/MyApplication/tree/master/p025_upload_img 附:这里借鉴了翔神(http://blog.csdn.net/lmj623565791/article/details/72859156)的写法,大家可以好好学习一下~哈哈~

js上传头像功能

这也是学习过程中的一个很使用的知识点就分享给大家了 注释都写在里面了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq

为office 365用户上传头像

方法一 使用outlook里面配置的office 365邮箱中的上传头像功能. 方法二 使用工具进行上传,注意此工具在中国大陆实际使用过程中,可能需要×××才能正常连接.CodeTwo User Photos for Office 365 - Thanks for download https://www.codetwo.com/freeware/user-photos-for-office-365-thanks 欢迎关注如下的微信公众号,获取更多IT资讯: 原文地址:http://blog.5

[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

写在前面 最近又开始忙了,工期紧比较赶,另外明天又要去驾校,只能一个功能一个功能的添加了,也许每次完成的功能确实不算什么,等将功能都实现了,然后在找一个好点的ui对前端重构一下. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册 [实战]MVC5+EF6+MySql企业网盘实战(3)——验证码 [实战]MVC5+EF6+MySql企业网盘实战(4)—

asp.net mvc上传头像加剪裁功能

正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc 4 核心的js调用代码是crop.js和helper文件夹下的ImgHandler.cs 效果图 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href=

asp.net mvc上传头像加剪裁功能介绍

正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc 4 核心的js调用代码是crop.js和helper文件夹下的ImgHandler.cs 效果图 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /><link href=&

web实现QQ头像上传截取功能

由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传的图片,在change事件中用form.jquery.js中的formajax异步提交表单,保存上传的图片 2:绑定cooper事件,对图片进行选取. 3:得到选中区域的坐标,对图片进行截取保存. 其中的难点是ie的兼容性问题,由于本人也不是很好,就不献丑了下面给大家附上代码 页面中的html <d