更新

admin/src/App.vue

@@ -52,7 +52,8 @@
               <div class="userPanel">
                 <el-row>
                   <el-col :span="24">
-                    <el-avatar :src="userDto.avatarFilePath" fit="fill" shape="square" size="small" icon="el-icon-user-solid" style="vertical-align: middle;">
+                    <el-avatar :src="avatarFilePath" fit="fill" shape="square" size="small" icon="el-icon-user-solid"
+                               style="vertical-align: middle;">
                     </el-avatar>
                     <span>{{userDto.nickName}}</span>
                     <el-divider></el-divider>
@@ -68,7 +69,8 @@
                   </el-col>
                 </el-row>
               </div>
-              <el-avatar :src="userDto.avatarFilePath" fit="fill" slot="reference" shape="square" size="large" icon="el-icon-user-solid">
+              <el-avatar :src="avatarFilePath" fit="fill" slot="reference" shape="square" size="large"
+                         icon="el-icon-user-solid">
               </el-avatar>
             </el-popover>
           </div>
@@ -147,6 +149,7 @@
   import glob from "./assets/js/glob";
   import leftMenu from "./components/leftMenu";
   import userCenter from "./components/userCenter";
+  import api_file from "./api/file";
 
   export default {
     name: 'App',
@@ -203,6 +206,7 @@
         showSearchInput: false,
         searchInputText: null,
         userDto: {},
+        avatarFilePath: null,
         menu: [],
         elAsideShow: true,
         leftMenuDrawerShow: false,
@@ -233,6 +237,7 @@
         //获得用户信息
         const userDtoResponse = await api_rbac.infoByToken(glob.getToken());
         this.userDto = userDtoResponse.data.result;
+        this.avatarFilePath = api_file.preview(this.userDto.avatarFileId, 40, 40);
         //获得菜单
         const menuResponse = await api_rbac.menu();
         this.menu = menuResponse.data.result;

admin/src/api/file.js

@@ -1,4 +1,13 @@
+import glob from "../assets/js/glob";
+
 const api_file = {
-  upload: (formData = {}) => axios.post('/private/file/upload', formData, {'Content-Type': 'multipart/form-data'})
+  upload: (formData = {}) => axios.post('/private/file/upload', formData, {'Content-Type': 'multipart/form-data'}),
+  preview: (fileId = "", width, height) => {
+    let path = process.env.VUE_APP_BASE_URL + 'api/udf/web/private/file/preview/' + fileId + '?token=' + glob.getToken();
+    if (width && height) {
+      path += '&width=' + width + '&height=' + height;
+    }
+    return path;
+  }
 };
 export default api_file;

admin/src/components/userCenter.vue

@@ -14,7 +14,7 @@
           :show-file-list="false"
           :before-upload="beforeAvatarFileUpload"
           :http-request="avatarFileUpload">
-          <img v-if="form.avatarFilePath" :src="form.avatarFilePath" class="avatar">
+          <img v-if="avatarFilePath" :src="avatarFilePath" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </el-form-item>
@@ -35,7 +35,8 @@
     data() {
       return {
         elUserCenter: {},
-        form: {}
+        form: {},
+        avatarFilePath: null
       }
     },
     methods: {
@@ -50,12 +51,14 @@
         const loading = this.$loading({target: this.elUserCenter, lock: true,});
         api_rbac.infoByToken(glob.getToken()).then(response => {
           this.form = response.data.result;
+          this.avatarFilePath = api_file.preview(this.form.avatarFileId);
         }).finally(() => loading.close());
       },
       //重置
       reset() {
         this.elUserCenter = document.getElementsByClassName('userCenter')[0];
         this.form = {};
+        this.avatarFilePath = null;
       },
       //保存按钮点击事件
       saveBtnClick() {
@@ -89,7 +92,7 @@
         api_file.upload(data).then(response => {
           const fileInfo = response.data.result;
           this.form.avatarFileId = fileInfo.id;
-          this.form.avatarFilePath = '/file/' + fileInfo.rootPathCode + '/' + fileInfo.physicalRelativePath + '/' + fileInfo.physicalFileName;
+          this.avatarFilePath = api_file.preview(this.form.avatarFileId);
         }).finally(() => loading.close());
       }
     }