vue之头像管理思路

思路是在vant库中使用插件将上传的头像转码存入数据库中。每个用户存一个，不同用户就有不同的头像了。若数据库中没有头像，那么就给一个默认头像

头像上传后端接口：

var express = require('express');
var router = express.Router();
var Headimg = require('./../sql/collection/headimgs');
var sql = require('./../sql');
var uuid = require('node-uuid');

/* GET home page. */
router.get('/', function (req, res, next) {
  // res.render('index', { title: 'Express' });
  res.send('测试')
});

//图片上传接口
router.post('/upload',(req,res,next)=> {
  let { file , userid} = req.body;
  let type = 'img';
  sql.delete(Headimg);
  sql.insert( Headimg, { file, type, userid } ).then( () => {
    res.send({code: 10017,message: '上传成功'})
  })
})

//查询图片接口
router.get('/getimg',(req,res,next) => {
  let { userid } = req.query
  sql.find( Headimg, { userid: userid }, {_id:0}).then((data)=>{
    res.send({
      code:10018,
      message:'查询成功',
      data:data
    })
  })
})

module.exports = router;

sql/collection中集合别忘了改

const mongoose = require('../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象

const headimgSchema = new Schema({
  type: {type: String },
  file: { type: String },
  userid: {type: String}
})

module.exports = mongoose.model('Headimg', headimgSchema);

前端页面：

<template>
  <div class="box">
   <Header>
      <div slot="center">个人中心</div>
    </Header>
    <div class="content">
      <div class="user-card">
        <div class="card">
          <div class="card-top">
            <div class="headimg" >
              <img :src='headimg' alt="暂无头像" v-if="flag">
              <van-uploader :after-read="afterRead" v-if="flag"/>
              <img src="/images/default_photo.png" alt="暂无头像" v-else>
            <p>
              <span v-if="!flag" class="gologin" @click="gologin()">前往登录</span>
              <span v-else>{{name}}</span>
              <span>会员卡</span>
            </p>
            </div>
            <span class="iconfont icon-ico code"></span>
          </div>
          <div class="card-center">
            <p class="buyvip">购买会员</p>
          </div>
          <div class="card-bottom">
            <p class="cardnum">NO.123456789</p>
            <p>永久有效</p>
          </div>
        </div>
      </div>
      <div class="user-grade">
        <div>
          <p>40张</p>
          <span>优惠券</span>
        </div>
        <span class="line"></span>
        <div>
          <p>650</p>
          <span>积分</span>
        </div>
        <span class="line"></span>
        <div>
          <p>0元</p>
          <span>储值</span>
        </div>
      </div>
      <div class="user-order user-default">
        <h4>我的订单</h4>
        <div class="order-main main-default">
          <router-link tag="div" to="/userorder?num=0">
            <span class="iconfont icon-quanbudingdan"></span>
            <p>全部订单</p>
          </router-link>
          <router-link tag="div" to="/userorder?num=1">
            <span class="iconfont icon-daifukuan"></span>
            <p>待付款</p>
          </router-link>
          <!-- <router-link tag="div" to="/userorder?num=2">
            <span class="iconfont icon-daifahuo"></span>
            <p>待发货</p>
          </router-link> -->
          <router-link tag="div" to="/userorder?num=2">
            <span class="iconfont icon-daifahuodingdan"></span>
            <p>待收货</p>
          </router-link>
          <router-link tag="div" to="/userorder?num=3">
            <span class="iconfont icon-daipingjia"></span>
            <p>待评价</p>
          </router-link>
          <router-link tag="div" to="/userorder?num=4">
            <span class="iconfont icon-shouhou"></span>
            <p>售后</p>
         </router-link>
        </div>
      </div>
      <div class="user-tools user-default">
        <h4>我的工具</h4>
        <div class="tools-main main-default">
          <router-link tag="div" :to="'/address?userid=' + userid">
            <span class="iconfont icon-shouhuodizhi"></span>
            <p>收货地址</p>
          </router-link>
          <router-link tag="div" to="/updatepassword">
            <span class="iconfont icon-xiugaimima"></span>
            <p>修改密码</p>
          </router-link>
          <router-link tag="div" to="/cart">
            <span class="iconfont icon-gouwuche"></span>
            <p>购物车</p>
          </router-link>
          <div>
            <span class="iconfont icon-xitongtongzhi"></span>
            <p>系统通知</p>
          </div>
          <div>
            <span class="iconfont icon-zuji"></span>
            <p>足迹</p>
          </div>
          <div>
            <span class="iconfont icon-shoucang"></span>
            <p>收藏</p>
          </div>
        </div>
      </div>
      <div class="user-vip user-default">
        <h4>会员中心</h4>
        <div class="vip-main main-default">
          <div>
            <span class="iconfont icon-huiyuan"></span>
            <p>会员卡</p>
          </div>
          <div>
            <span class="iconfont icon-user-coupon"></span>
            <p>优惠券</p>
          </div>
          <div>
            <span class="iconfont icon-jifen"></span>
            <p>积分</p>
          </div>
          <div>
            <span class="iconfont icon-money-bag-copy"></span>
            <p>储值金</p>
          </div>
        </div>
      </div>
      <div class="user-market user-default">
      <h4>营销工具</h4>
      <div class="market-main main-default">
        <div>
          <span class="iconfont icon-wodepintuan"></span>
          <p>我的拼团</p>
        </div>
        <div>
          <span class="iconfont icon-zhongjiangjilu-"></span>
          <p>中奖记录</p>
        </div>
        <router-link tag="div" to="/about">
          <span class="iconfont icon-daiyanrenzhongxin"></span>
          <p>关于我们</p>
        </router-link>
      </div>
    </div>
    <div class="quit" v-if="flag">
      <button class="outlogin" @click="outlogin()">退出登录</button>
    </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.user-card {
  padding: 0.2rem;
  background: #fff;
  margin-bottom: .15rem;
  .card {
    width: 100%;
    height:1.15rem;
    background: #9A9A9A url("/images/userCenterHead.png") no-repeat;
    background-size: 100% auto;
    border-radius: 5px;
    @include flexbox();
    @include flex-direction(column);
    @include padding(.1rem);
    @include justify-content(space-between);
    .card-top {
      @include flexbox();
      @include justify-content(space-between);
        .headimg{
          img{
              border-radius: 50%;
              width: .5rem;
              height: .5rem;
          }
          .van-uploader{
              position: absolute;
              opacity: 0;
              width: 50px;
              height: 50px;
          }
        }
      div {
        @include flexbox();
        p {
          @include padding(0 0 0 10px);
          @include flexbox();
          @include flex-direction(column);
          .gologin {
            text-decoration: underline;
            // font-style: italic;
            color:#fff;
            font-size: 20px;
          }
      }
      }
      .code {
        font-size: 0.25rem;
      }
    }
    .card-center {
      @include flexbox();
      @include justify-content(flex-end);
      margin-bottom: 9px;
      .buyvip {
        width: 0.7rem;
        height:0.25rem;
        background: #FF7100;
        color: #fff;
        text-align: center;
        border-radius: 8px;
        line-height: .25rem;
      }
    }
    .card-bottom {
      @include flexbox();
      @include justify-content(space-between);
    }
  }
}
.user-grade {
  @include flexbox();
  @include align-items();
  @include justify-content(space-around);
  height: .7rem;
  background: #fff;
  text-align: center;
  margin-bottom: 9px;
   div {
     p {
      font-size: 0.18rem;
      font-weight: bold;
   }
   }
   .line {
     width:1px;
     height:25px;
     background: #E4E4E4;
   }
}
.user-default {
  background: #fff;
  margin-bottom: 10px;
  h4 {
    font-weight: 100;
    height:.4rem;
    line-height: .4rem;
    padding-left: .2rem;
    border-bottom: 1px solid #F3F3F3;
  }
  .main-default {
    @include flexbox();
    flex-wrap: wrap;
    padding-top: 15px;
      div {
        width: 25%;
        height:.8rem;
        text-align: center;
        span {
          font-size: .24rem;
        }
      }
  }
}
.user-tools, .user-market {
  .tools-main, .market-main {
    div {
      width: 33%;
    }
  }
}
.quit {
  @include flexbox();
  justify-content: center;
  .outlogin {
  width: 90%;
  border: none;
  background: rgba(250, 41, 58, 0.808);
  height:.4rem;
  line-height:.4rem;
  color: #fff;
  margin:.2rem 0;
}
}

</style>
<script>
import Header from '@/components/Header'
import Vue from 'vue'
import { Uploader } from 'vant'
import axios from '@/utils/request'

Vue.use(Uploader)
export default {
  components: {
    Header
  },
  data () {
    return {
      flag: false,
      name: '',
      headimg: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=188149577,2949073731&fm=26&gp=0.jpg',
      userid: ''
    }
  },
  created () {
    let userid = localStorage.getItem('userid')
    axios.get('headimg/getimg?userid=' + userid).then(res => {
      if (res.data.code === 10018) {
        // console.log(res)
        if (res.data.data.length !== 0) {
          this.headimg = res.data.data[0].file
        }
      }
    })
  },
  methods: {
    gologin () {
      this.$router.push('/login')
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      let userid = localStorage.getItem('userid')
      axios.post('headimg/upload', {
        userid: userid,
        file: file.content
      }).then(res => {
        console.log(userid)
        this.$router.go(0)
      })
    },
    outlogin () {
      localStorage.removeItem('userid')
      localStorage.removeItem('username')
      // localStorage.removeItem('token')
      window.location.reload()
    }
  },
  mounted () {
    let username = localStorage.getItem('username')
    let id = localStorage.getItem('userid')
    // console.log(username)
    if (username) {
      this.name = username
      this.userid = id
      this.flag = true
    } else {
      this.flag = false
    }
  }
}
</script>