flask 上传头像

简介: 笔记

    上传头像,自己感觉了好久,就是上传文件呗其实,存在一个路径,数据库存储这个路径,然后展示给前端,啥都不说,看怎么实现的。

数据库设置如下

user_image=db.Column(db.String(252),nullable=True)

form 表单设计:

avatar=FileField('头像')

后端实现代码

avatar=request.files['avatar']
 fanme=avatar.filename
 upfile=os.getcwd()+('/app/static/avatar/')
 ALLOWER_EXIT=['pang','jpg','jpeg','jig']
flag='.' in fanme and fanme.split('.')[1] in ALLOWER_EXIT
if not flag:
     return render_template('editperson.html',form=form)
 avatar.save('{}{}{}'.format(upfile,user.username,fanme))
 user.user_image='/static/avatar/{}{}'.format(user.username,fanme)
 db.session.add(user)

存储路径是

/static/avatar/,支持格式 pang、jpg、jpeg等格式,这个可以根据自己的需求进行设置。

存储后会在数据库存储一个路径

最后实现后数据库

1.png

接下来是前端的展示

{% if username.user_image%}
<img   src="{{username.user_image}}" style="height:80px;">
{%else%}
<img src="/static/img/0.jpg" style="height:70px;width:80px">
{%endif%}

这里说明下,这里的后端实现上传的头像的代码 在Windows上回报错,说文件不存在,我试着去修改了,就是路径名字别太长,

路径 名字短可以,长了就报错。Windows开发很有弊端,在Ubuntu 实现没有一点问题

项目地址 https://github.com/liwanlei/flask_blog
相关文章
|
5月前
|
Python
Flask三种文件下载方法
Flask 是一个流行的 Python Web 框架,它提供了多种方法来实现文件下载。在本文中,我们将介绍三种不同的方法,以便你能够选择最适合你应用程序的方法。
423 2
|
1月前
|
Python
Flask学习笔记(二):基于Flask框架上传图片到服务器端并原名保存
关于如何使用Flask框架上传图片到服务器端并以其原名保存的教程。
76 1
|
1月前
|
Python
Flask学习笔记(三):基于Flask框架上传特征值(相关数据)到服务器端并保存为txt文件
这篇博客文章是关于如何使用Flask框架上传特征值数据到服务器端,并将其保存为txt文件的教程。
31 0
Flask学习笔记(三):基于Flask框架上传特征值(相关数据)到服务器端并保存为txt文件
|
1月前
|
Python
Flask学习笔记(四):基于Flask网页显示图片
这篇博客文章介绍了如何使用Flask框架在网页上显示图片。
35 0
|
5月前
|
JavaScript
|
6月前
|
数据库 数据安全/隐私保护 开发者
WTForms在Flask中的应用:创建与验证表单
【4月更文挑战第16天】本文介绍了如何在Flask应用中使用WTForms进行表单处理。首先,通过`pip install WTForms`安装库,并在配置文件中启用CSRF保护。接着,创建表单类,如`RegistrationForm`,包含所需字段及验证规则。在视图函数中处理表单提交,验证数据并进行相应操作。最后,在模板中渲染表单,显示标签、输入字段及验证错误信息。WTForms提供便捷的表单创建和验证,增强应用交互性和安全性。
|
6月前
|
存储 数据库 Python
Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)
web应用实战:导入文件解析到DB,上传图片【2月更文挑战第25天】
93 0
Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)
|
6月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
111 0
|
存储 Python
26 Django高级- 上传图片
26 Django高级- 上传图片
38 0
|
JavaScript 前端开发 API
【Vue】 前端上传图片时限制只可以按文件夹上传图片( webkitdirectory )
【Vue】 前端上传图片时限制只可以按文件夹上传图片( webkitdirectory )
【Vue】 前端上传图片时限制只可以按文件夹上传图片( webkitdirectory )