上传头像功能（明天添加用户信息更新方法）

QMPlusServer/controller/api/user.go

@@ -129,10 +129,9 @@ func UploadHeaderImg(c *gin.Context) {
 	//获取头像文件
 	// 这里我们通过断言获取 claims内的所有内容
 	waitUse := claims.(*middleware.CustomClaims)
-	fmt.Println(waitUse.NickName)
+	uuid := waitUse.UUID
 	_, header, err := c.Request.FormFile("headerImg")
 	//便于找到用户 以后从jwt中取
-	username := c.PostForm("username")
 	if err != nil {
 		servers.ReportFormat(c, false, fmt.Sprintf("上传文件失败，%v", err), gin.H{})
 	} else {
@@ -142,8 +141,7 @@ func UploadHeaderImg(c *gin.Context) {
 			servers.ReportFormat(c, false, fmt.Sprintf("接收返回值失败，%v", err), gin.H{})
 		} else {
 			//修改数据库后得到修改后的user并且返回供前端使用
-			err, user := new(dbModel.User).UploadHeaderImg(username, filePath)
-
+			err, user := new(dbModel.User).UploadHeaderImg(uuid, filePath)
 			if err != nil {
 				servers.ReportFormat(c, false, fmt.Sprintf("修改数据库链接失败，%v", err), gin.H{})
 			} else {

QMPlusServer/model/dbModel/user.go

@@ -69,9 +69,9 @@ func (u *User) Login() (err error, userInter *User) {
 }
 
 // 用户头像上传更新地址
-func (u *User) UploadHeaderImg(username string, filePath string) (err error, userInter *User) {
+func (u *User) UploadHeaderImg(uuid uuid.UUID, filePath string) (err error, userInter *User) {
 	var user User
-	err = qmsql.DEFAULTDB.Where("username = ?", username).First(&user).Update("header_img", filePath).First(&user).Error
+	err = qmsql.DEFAULTDB.Where("uuid = ?", uuid).First(&user).Update("header_img", filePath).First(&user).Error
 	return err, &user
 }
 

QMPlusVuePage/src/view/dashbord/index.vue

@@ -6,21 +6,7 @@
     <h4 style="text-align:center">
       微信：shouzi_1994
     </h4>
-    <!-- <el-card class="box-card" shadow="hover">
-      <div class="clearfix" slot="header">
-        <span>用户信息</span>
-      </div>
-      <el-row>
-        <div class="fl-left left-mg-xs">
-          <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar>
-        </div>
-        <div class="fl-left left-mg-lg">
-          <div>用户ID：{{userInfo.uuid}}</div>
-          <div>用户昵称：{{userInfo.nickName}}</div>
-          <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
-        </div>
-      </el-row>
-    </el-card> -->
+    
     <Animition />
   </div>
 </template>
@@ -39,8 +25,6 @@ export default {
 }
 </script>
 
-<style scoped>
-.box-card {
-  width: 600px;
-}
+<style lang="scss" scoped>
+
 </style>

QMPlusVuePage/src/view/layout/aside/index.vue

@@ -1,26 +1,24 @@
 <template>
   <div>
-    <div class="menu-total"  @click="isCollapse=!isCollapse">
+    <div @click="isCollapse=!isCollapse" class="menu-total">
       <i class="el-icon-arrow-right" v-if="isCollapse"></i>
       <i class="el-icon-arrow-left" v-else></i>
     </div>
-      <el-scrollbar style="height:calc(100vh - 52px)">
-    <transition name="el-zoom-in-top">
-      <el-menu
-        :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
-        :collapse="isCollapse"
-        :default-active="active"
-        @select="selectMenuItem"
-        unique-opened
-      >
-        <aside-component
-          :key="item.name"
-          :routerInfo="item"
-          v-for="item in asyncRouters[0].children"
-        />
-      </el-menu>
-    </transition>
-      </el-scrollbar>
+    <el-scrollbar style="height:calc(100vh - 52px)">
+      <transition name="el-zoom-in-top">
+        <el-menu
+          :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+          :collapse="isCollapse"
+          :default-active="active"
+          @select="selectMenuItem"
+          unique-opened
+        >
+          <template v-for="item in asyncRouters[0].children">
+            <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
+          </template>
+        </el-menu>
+      </transition>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -32,7 +30,7 @@ export default {
   data() {
     return {
       active: '',
-      isCollapse: false,
+      isCollapse: false
     }
   },
   methods: {

QMPlusVuePage/src/view/layout/index.vue

@@ -15,6 +15,7 @@
                 <el-badge is-dot />
               </span>
             </el-dropdown-item>
+            <el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>            
             <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp"> 登 出 </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -54,6 +55,9 @@ export default {
     ...mapMutations('user', ['LoginOut']),
     totalCollapse() {
       this.$bus.emit('totalCollapse')
+    },
+    toPerson(){
+      this.$router.push({name:"person"})
     }
   },
   computed: {

QMPlusVuePage/src/view/person/person.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="fl-left left-mg-xs">
+      <el-upload
+        :headers="{'x-token':token}"
+        :on-success="handleAvatarSuccess"
+        :show-file-list="false"
+        action="api/user/uploadHeaderImg"
+        class="avatar-uploader"
+        name="headerImg"
+      >
+        <img :src="userInfo.headerImg" class="avatar" v-if="userInfo.headerImg" />
+        <i class="el-icon-plus avatar-uploader-icon" v-else></i>
+      </el-upload>
+
+      <!-- <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar> -->
+    </div>
+    <div class="fl-left left-mg-lg">
+      <div>用户ID：{{userInfo.uuid}}</div>
+      <div>用户昵称：{{userInfo.nickName}}</div>
+      <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'Person',
+  computed: {
+    ...mapGetters('user', ['userInfo', 'token'])
+  },
+  methods:{
+      handleAvatarSuccess(){
+        //   上传完成后更新用户头像 今晚太困了 明天更新 今晚暂时调通更新功能
+      }
+  }
+}
+</script>
+<style lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>