用户头像由上传模式改为 媒体库选择模式

web/src/view/person/person.vue

@@ -1,28 +1,19 @@
 <template>
   <div>
     <div class="fl-left left-mg-xs">
-      <el-upload
-        :headers="{'x-token':token}"
-        :on-success="handleAvatarSuccess"
-        :show-file-list="false"
-        :action="`${path}/user/uploadHeaderImg`"
-        class="avatar-uploader"
-        name="headerImg"
-      >
-        <CustomPic picType="img"/>
-      </el-upload>
-
-      <!-- <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar> -->
+      <el-avatar :size="120" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></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>
+    <ChooseImg ref="chooseImg" @enter-img="enterImg"/>
   </div>
 </template>
 <script>
-import CustomPic from '@/components/customPic'
+import ChooseImg from "@/components/chooseImg";
+import {setUserInfo} from "@/api/user"
 import { mapGetters, mapMutations } from 'vuex'
 const path = process.env.VUE_APP_BASE_API
 export default {
@@ -33,16 +24,27 @@ export default {
     }
   },
   components: {
-		CustomPic
+		ChooseImg
 	},
   computed: {
     ...mapGetters('user', ['userInfo', 'token'])
   },
   methods:{
     ...mapMutations('user',['ResetUserInfo']),
-      handleAvatarSuccess(res){
-        this.ResetUserInfo({headerImg:res.data.user.headerImg})
-      }
+      openChooseImg(){
+        this.$refs.chooseImg.open()
+      },
+      async enterImg(url){
+        const res = await setUserInfo({headerImg:url,ID:this.userInfo.ID})
+        if(res.code == 0){
+          this.ResetUserInfo({headerImg:url})
+          this.$message({
+            type:"success",
+            message:"设置成功"
+          }
+          )
+        }
+      },
   }
 }
 </script>