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

数据库设置如下

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. 网际报文控制协议ICMP

    为了更有效地转发IP数据报和提高交付成功的机会,在网际层使用了网际控制报文协议ICMP.ICMP允许主机或路由器报告差错情况和提供有关异常情况的报告.ICMP是因特网的标准协议.但ICMP不是高层协议 ...

  2. Sqlla: 数据库操作从未如此简单

    Sqlla 一套数据库的 ORM 微型库,提供简单高效的 API 来操作数据库. Sqlla 拥有极少的API,使用方式简单.让开发者不需要关心数据库操作的具体细节,只需专注SQL和业务逻辑.同时简单 ...

  3. 【JAVAWEB学习笔记】06_jQuery基础

    接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $(& ...

  4. Java编程之委托代理回调、内部类以及匿名内部类回调(闭包回调)

    最近一直在看Java的相关东西,因为我们在iOS开发是,无论是Objective-C还是Swift中,经常会用到委托代理回调,以及Block回调或者说是闭包回调.接下来我们就来看看Java语言中是如何 ...

  5. sublime text3 支持终端打开文件

    sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

  6. 使用Git初始化项目

    1.在Git官网上点击New repository新建项目: 2.在本地新建一个同名文件: 3.打开git bash切换到新建的文件目录: 4.echo "# myprojectname&q ...

  7. 017 多对多关联映射 双向(many-to-many)

    多对多关联映射 双向 两方都持有对象引用,修改对象模型,但数据的存储没有变化. 再修改映射文件: public class Role { private int id; private String ...

  8. docker安装-centos7

    操作系统要求 要安装Docker,您需要64位版本的CentOS 7.步骤:   卸载旧版本 Docker的旧版本被称为docker或docker-engine . 如果这些已安装,请卸载它们以及关联 ...

  9. cas4.2.7实现单点登录

    准备前参考: cas server下载地址 cas client 下载地址 安全cookie setSecure详解 Spring通过构造方法注入的四种方式 cas 学习博文 自定义登录页和登录认证 ...

  10. WebLogic 安装

    首先 需要下载好Weblogic 官网:http://www.oracle.com/technetwork/middleware/weblogic/downloads/wls-main-097127. ...