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

数据库设置如下

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等格式,这个可以根据自己的需求进行设置。 
存储后会在数据库存储一个路径
最后实现后数据库

接下来是前端的展示

{% 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

flask 上传头像的更多相关文章

  1. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  2. swift上传头像

    很久没有写博客了,今天特地写了这个,也是一边仿照别人写的demo,注释部分都是需要的.需要的同学可以参考一下. @IBAction func headImageBtnPage(){  //上传头像 / ...

  3. html5 上传头像的裁剪

    本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全: 下图为裁剪后的效果: html部分: <!DOCTYPE html& ...

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

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

  5. Jcrop+uploadify+php实现上传头像预览裁剪

    最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...

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

    正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...

  7. 上传头像,界面无跳转,php+js

    上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: //route 为后端接口//upload/avatar 为上传的头像的保存地址//imgurl=/uplo ...

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

    现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...

  9. Android基础之——startActivityForResult启动界面并返回数据,上传头像

    在android应用的开发过程中,常常会出现启动一个界面后填写部分内容后带着数据返回启动前的界面,最典型的应用就是登录过程.在非常多应用程序的模块中,都有"我的"这个模块,在未登录 ...

随机推荐

  1. Charles Proxy代理使用简要说明

    1.去官网下载免费试用版: http://www.charlesproxy.com/ (需要机器有Java运行时)或下载破解注册版:http://charles.iiilab.com/,安装后开启默认 ...

  2. css文字溢出隐藏,及强制断句

    只显示一行文字,便溢出隐藏 text-overflow: ellipsis; white-place: nowrap; overflow: hidden; 显示 n 行文字后便溢出隐藏  displa ...

  3. OpenCV探索之路(六):边缘检测(canny、sobel、laplacian)

    边缘检测的一般步骤: 滤波--消除噪声 增强--使边界轮廓更加明显 检测--选出边缘点 Canny算法 Canny边缘检测算法被很多人推崇为当今最优秀的边缘检测算法,所以我们第一个就介绍他. open ...

  4. Regression:Generalized Linear Models

    作者:桂. 时间:2017-05-22  15:28:43 链接:http://www.cnblogs.com/xingshansi/p/6890048.html 前言 本文主要是线性回归模型,包括: ...

  5. html学习笔记 - 列表

    <!-- 无序列表 --> <ul type = square> <li><a href="https://www.baidu.com"& ...

  6. Introducing: Machine Learning in R(转)

    Machine learning is a branch in computer science that studies the design of algorithms that can lear ...

  7. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  8. 一个html页面传入参数到另一个html页面用js获取方法

    没错使用以下函数就能够完整的获取到路径里的你想要的参数:function getURLParameter(name) { return decodeURIComponent((new RegExp(' ...

  9. cas4.2.7与shiro进行整合

    准备工作 cas单点登录开始前准备,请参考cas4.2.7实现单点登录. 与shiro进行整合 注:准备工作的基础上,对cas客户端进行如下改进. 引入相关jar包 shiro-cas-1.2.6.j ...

  10. vue2.0+element+node+webpack搭建的一个简单的后台管理界面

    闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...