云下生产图片使用页面打开地址作为基础路径

src/store/modules/user.js

@@ -1,125 +1,136 @@
 import router from '@/router'
-import { MessageBox, } from 'element-ui'
+import {MessageBox,} from 'element-ui'
-import { login, logout, getInfo } from '@/api/login'
+import {getInfo, login, logout} from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import {getToken, removeToken, setToken} from '@/utils/auth'
-import { isHttp, isEmpty } from "@/utils/validate"
+import {isEmpty, isHttp} from "@/utils/validate"
 import defAva from '@/assets/images/profile.jpg'
 
 const user = {
-  state: {
+    state: {
-    token: getToken(),
+        token: getToken(),
-    id: '',
+        id: '',
-    name: '',
+        name: '',
-    nickName: '',
+        nickName: '',
-    avatar: '',
+        avatar: '',
-    roles: [],
+        roles: [],
-    permissions: []
+        permissions: []
-  },
+    },
 
-  mutations: {
+    mutations: {
-    SET_TOKEN: (state, token) => {
+        SET_TOKEN: (state, token) => {
-      state.token = token
+            state.token = token
+        },
+        SET_ID: (state, id) => {
+            state.id = id
+        },
+        SET_NAME: (state, name) => {
+            state.name = name
+        },
+        SET_NICK_NAME: (state, nickName) => {
+            state.nickName = nickName
+        },
+        SET_AVATAR: (state, avatar) => {
+            state.avatar = avatar
+        },
+        SET_ROLES: (state, roles) => {
+            state.roles = roles
+        },
+        SET_PERMISSIONS: (state, permissions) => {
+            state.permissions = permissions
+        }
     },
-    SET_ID: (state, id) => {
+
-      state.id = id
+    actions: {
-    },
+        // 登录
-    SET_NAME: (state, name) => {
+        Login({commit}, userInfo) {
-      state.name = name
+            const username = userInfo.username.trim()
-    },
+            const password = userInfo.password
-    SET_NICK_NAME: (state, nickName) => {
+            const code = userInfo.code
-      state.nickName = nickName
+            const uuid = userInfo.uuid
-    },
+            return new Promise((resolve, reject) => {
-    SET_AVATAR: (state, avatar) => {
+                login(username, password, code, uuid).then(res => {
-      state.avatar = avatar
+                    setToken(res.token)
-    },
+                    commit('SET_TOKEN', res.token)
-    SET_ROLES: (state, roles) => {
+                    resolve()
-      state.roles = roles
+                }).catch(error => {
-    },
+                    reject(error)
-    SET_PERMISSIONS: (state, permissions) => {
+                })
-      state.permissions = permissions
+            })
+        },
+
+        // 获取用户信息
+        GetInfo({commit, state}) {
+            return new Promise((resolve, reject) => {
+                getInfo().then(res => {
+                    const user = res.user
+                    let avatar = user.avatar || ""
+                    if (!isHttp(avatar)) {
+                        const imgBase = process.env.NODE_ENV === 'production' ? window.location.origin : process.env.VUE_APP_IMG_URL
+                        avatar = (isEmpty(avatar)) ? defAva : imgBase + avatar
+                    }
+                    if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+                        commit('SET_ROLES', res.roles)
+                        commit('SET_PERMISSIONS', res.permissions)
+                    } else {
+                        commit('SET_ROLES', ['ROLE_DEFAULT'])
+                    }
+                    commit('SET_ID', user.userId)
+                    commit('SET_NAME', user.userName)
+                    commit('SET_NICK_NAME', user.nickName)
+                    commit('SET_AVATAR', avatar)
+                    /* 初始密码提示 */
+                    if (res.isDefaultModifyPwd) {
+                        MessageBox.confirm('您的密码还是初始密码，请修改密码！', '安全提示', {
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            router.push({name: 'Profile', params: {activeTab: 'resetPwd'}})
+                        }).catch(() => {
+                        })
+                    }
+                    /* 过期密码提示 */
+                    if (!res.isDefaultModifyPwd && res.isPasswordExpired) {
+                        MessageBox.confirm('您的密码已过期，请尽快修改密码！', '安全提示', {
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            router.push({name: 'Profile', params: {activeTab: 'resetPwd'}})
+                        }).catch(() => {
+                        })
+                    }
+                    resolve(res)
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+
+        // 退出系统
+        LogOut({commit, state}) {
+            return new Promise((resolve, reject) => {
+                logout(state.token).then(() => {
+                    commit('SET_TOKEN', '')
+                    commit('SET_ROLES', [])
+                    commit('SET_PERMISSIONS', [])
+                    removeToken()
+                    resolve()
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+
+        // 前端 登出
+        FedLogOut({commit}) {
+            return new Promise(resolve => {
+                commit('SET_TOKEN', '')
+                removeToken()
+                resolve()
+            })
+        }
     }
-  },
-
-  actions: {
-    // 登录
-    Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
-      return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
-          setToken(res.token)
-          commit('SET_TOKEN', res.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 获取用户信息
-    GetInfo({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        getInfo().then(res => {
-          const user = res.user
-          let avatar = user.avatar || ""
-          if (!isHttp(avatar)) {
-            avatar = (isEmpty(avatar)) ? defAva : process.env.VUE_APP_IMG_URL + avatar
-          }
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', res.roles)
-            commit('SET_PERMISSIONS', res.permissions)
-          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
-          }
-          commit('SET_ID', user.userId)
-          commit('SET_NAME', user.userName)
-          commit('SET_NICK_NAME', user.nickName)
-          commit('SET_AVATAR', avatar)
-          /* 初始密码提示 */
-          if(res.isDefaultModifyPwd) {
-            MessageBox.confirm('您的密码还是初始密码，请修改密码！',  '安全提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning' }).then(() => {
-              router.push({ name: 'Profile', params: { activeTab: 'resetPwd' } })
-            }).catch(() => {})
-          }
-          /* 过期密码提示 */
-          if(!res.isDefaultModifyPwd && res.isPasswordExpired) {
-            MessageBox.confirm('您的密码已过期，请尽快修改密码！',  '安全提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning' }).then(() => {
-              router.push({ name: 'Profile', params: { activeTab: 'resetPwd' } })
-            }).catch(() => {})
-          }
-          resolve(res)
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 退出系统
-    LogOut({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
-          removeToken()
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 前端 登出
-    FedLogOut({ commit }) {
-      return new Promise(resolve => {
-        commit('SET_TOKEN', '')
-        removeToken()
-        resolve()
-      })
-    }
-  }
 }
 
 export default user

src/views/system/user/profile/userAvatar.vue

@@ -1,29 +1,31 @@
 <template>
   <div>
-    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像"
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
+                                                            class="img-circle img-lg"/></div>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"
+               @close="closeDialog">
       <el-row>
         <el-col :xs="24" :md="12" :style="{height: '350px'}">
           <vue-cropper
-            ref="cropper"
+              ref="cropper"
-            :img="options.img"
+              :img="options.img"
-            :info="true"
+              :info="true"
-            :autoCrop="options.autoCrop"
+              :autoCrop="options.autoCrop"
-            :autoCropWidth="options.autoCropWidth"
+              :autoCropWidth="options.autoCropWidth"
-            :autoCropHeight="options.autoCropHeight"
+              :autoCropHeight="options.autoCropHeight"
-            :fixedBox="options.fixedBox"
+              :fixedBox="options.fixedBox"
-            :outputType="options.outputType"
+              :outputType="options.outputType"
-            @realTime="realTime"
+              @realTime="realTime"
-            v-if="visible"
+              v-if="visible"
           />
         </el-col>
         <el-col :xs="24" :md="12" :style="{height: '350px'}">
           <div class="avatar-upload-preview">
-            <img :src="previews.url" :style="previews.img" />
+            <img :src="previews.url" :style="previews.img"/>
           </div>
         </el-col>
       </el-row>
-      <br />
+      <br/>
       <el-row>
         <el-col :lg="2" :sm="3" :xs="3">
           <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
@@ -55,12 +57,12 @@
 
 <script>
 import store from "@/store"
-import { VueCropper } from "vue-cropper"
+import {VueCropper} from "vue-cropper"
-import { uploadAvatar } from "@/api/system/user"
+import {uploadAvatar} from "@/api/system/user"
-import { debounce } from '@/utils'
+import {debounce} from '@/utils'
 
 export default {
-  components: { VueCropper },
+  components: {VueCropper},
   data() {
     return {
       // 是否显示弹出层
@@ -75,7 +77,7 @@ export default {
         autoCropWidth: 200,         // 默认生成截图框宽度
         autoCropHeight: 200,        // 默认生成截图框高度
         fixedBox: true,             // 固定截图框大小 不允许改变
-        outputType:"png",           // 默认生成截图为PNG格式
+        outputType: "png",           // 默认生成截图为PNG格式
         filename: 'avatar'          // 文件名称
       },
       previews: {},
@@ -136,8 +138,9 @@ export default {
         let formData = new FormData()
         formData.append("avatarfile", data, this.options.filename)
         uploadAvatar(formData).then(response => {
+          const imgBase = process.env.NODE_ENV === 'production' ? window.location.origin : process.env.VUE_APP_IMG_URL
           this.open = false
-          this.options.img = process.env.VUE_APP_IMG_URL + response.imgUrl
+          this.options.img = imgBase + response.imgUrl
           store.commit('SET_AVATAR', this.options.img)
           this.$modal.msgSuccess("修改成功")
           this.visible = false