Web实战之用户头像

---

在这次博客中我们为用户增加头像

实现功能

• 用户头像上传
• 为每个用户提供三个候选头像，分别是最近两次的头像和系统默认头像

依赖的第三方工具

• AngularJS前端框架
• Express后端框架
• Angular-File-upload插件
• connect-busboy插件
• then.js小工具
• mongoose数据库插件

问题分析

用一个长度为3的栈来保存用户的候选头像，且栈的底部必定是系统默认头像，越新的头像就越靠近栈顶

情况分类

上传新头像

用户上传与之前上传过的同名头像怎么办？

• 与当前头像名相同，什么都不做
• 与备用头像名相同，当前头像入栈，删除备用头像名，当前改为上传头像名
• 都不相同，当前头像入栈，再看长度有没有超，超了删第一号头像（默认后面的那个）

在备用头像里更换

• 用户选择默认头像，当前也是默认，不做任何事
• 用户选备用头像，当前是默认头像，当前头像不入栈，栈删除对应备用头像
• 用户选默认头像，当前头像非默认，当前头像入栈，若栈长超过3，删除1号头像
• 当前非默认头像，用户选备用头像，当前头像入栈，删除相应备用头像

页面代码

由于在我的博客中前端实战之用户控制台中有详细的页面代码这里只出示一小部分，方便大家阅读

<label class="control-label col-sm-2">
    头像
</label>


<div class="avatar col-sm-2">
   <img alt="用户头像" class="img-circle" ng-src="{
  {profile.avatar}}">
</div>




<div class="btn-group change-avatar col-sm-2">
   <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">