修改头像-功能完善

src/api/system/user.js

@@ -97,11 +97,10 @@ export function postUserOpsPwd(data) {
 }
 
 // 用户头像上传
-export function uploadAvatar(data) {
+export function postUserOpsAvatarUpdate(data) {
   return request({
-    url: '/system/user/profile/avatar',
+    url: '/users/ops/avatar/update',
     method: 'post',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     data: data
   })
 }

src/layout/components/Navbar.vue

@@ -50,20 +50,24 @@
         trigger="hover"
       >
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar" />
+          <img :src="config.MINIO_ENDPOINT_HTTPS +userInfo.avatar" class="user-avatar" />
           <span class="user-nickname">
             {{ userInfo.name }}
           </span>
           <span class="user-nickname">
             <el-link
               type="primary"
-              icon="el-icon-circle-check"
               :underline="false"
             >
-              {{ userInfo.status }}
+              {{
+                userInfo.status
+                  ? userStateList.find((item) => item.id == userInfo.status)
+                      .state
+                  : ""
+              }}
             </el-link>
           </span>
-          <span class="user-nickname">
+          <span class="user-nickname" v-if="userInfo.group">
             所属单位
             <el-link type="primary" :underline="false">
               {{ userInfo.group }}
@@ -132,7 +136,6 @@ import SystemSettingDialog from "./SystemSettingDialog";
 import AboutDialog from "./AboutDialog";
 
 export default {
-  dicts: ["sys_normal_disable"],
   components: {
     Breadcrumb,
     Logo,
@@ -167,7 +170,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(["sidebar", "avatar", "device", "userInfo"]),
+    ...mapGetters(["sidebar", "avatar", "device", "config", "userStateList", "userInfo"]),
     setting: {
       get() {
         return this.$store.state.settings.showSettings;

src/store/getters.js

@@ -8,6 +8,7 @@ const getters = {
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
   loginInfo: state => state.user.loginInfo,
+  userStateList: state => state.user.userStateList,
   token: state => state.user.token,
   userInfo: state => state.user.userInfo,
   introduction: state => state.user.introduction,

src/store/modules/user.js

@@ -2,7 +2,7 @@ import store from '@/store'
 import router from '@/router'
 import cache from '@/plugins/cache'
 import { MessageBox } from 'element-ui'
-import { login, logout, getInfo, getCommonConfigOptions } from '@/api/login'
+import { login, logout, getInfo, getCommonConfigOptions, postUserStateList } from '@/api/login'
 import { getToken, getLoginInfo, setToken, setLoginInfo, removeToken, removeLoginInfo } from '@/utils/auth'
 import { isHttp, isEmpty } from "@/utils/validate"
 import defAva from '@/assets/images/profile.jpg'
@@ -11,11 +11,12 @@ import { initMinioClient, parseMinioFilePath } from '@/utils/requestMinio'
 const user = {
   state: {
     loginInfo: getLoginInfo(),
+    userStateList: [],
     userInfo: {},
     token: getToken(),
     roles: [],
     permissions: [],
-    netConfig: {}
+    netConfig: {},
   },
 
   mutations: {
@@ -37,6 +38,9 @@ const user = {
     SET_NET_CONFIG: (state, netConfig) => {
       state.netConfig = netConfig
     },
+    SET_USER_STATE_LIST: (state, userStateList) => {
+      state.userStateList = userStateList
+    },
   },
   actions: {
     // 登录
@@ -60,6 +64,9 @@ const user = {
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
+          postUserStateList().then(res => {
+            commit('SET_USER_STATE_LIST', res.data.list)
+          })
           const user = res.data
           let avatar = user.avatar || ""
           if (!isHttp(avatar)) {

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

@@ -1,162 +1,133 @@
 <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()">
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
+      <img
-      <el-row>
+        v-bind:src="optionsImg"
-        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+        title="点击上传头像"
-          <vue-cropper
+        class="img-circle img-lg"
-            ref="cropper"
-            :img="options.img"
-            :info="true"
-            :autoCrop="options.autoCrop"
-            :autoCropWidth="options.autoCropWidth"
-            :autoCropHeight="options.autoCropHeight"
-            :fixedBox="options.fixedBox"
-            :outputType="options.outputType"
-            @realTime="realTime"
-            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" />
     </div>
-        </el-col>
+    <!-- 文件选择隐藏输入 -->
-      </el-row>
+    <input
-      <br />
+      ref="fileInput"
-      <el-row>
+      type="file"
-        <el-col :lg="2" :sm="3" :xs="3">
+      accept="image/*"
-          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+      style="display: none"
-            <el-button size="small">
+      @change="handleFileSelect"
-              选择
+    />
-              <i class="el-icon-upload el-icon--right"></i>
-            </el-button>
-          </el-upload>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
-          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
-          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
-          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
-          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
-        </el-col>
-        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
-          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
-        </el-col>
-      </el-row>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import store from "@/store"
+import store from "@/store";
-import { VueCropper } from "vue-cropper"
+import { postUserOpsAvatarUpdate } from "@/api/system/user";
-import { uploadAvatar } from "@/api/system/user"
+import { uploadFile } from "@/utils/requestMinio";
-import { debounce } from '@/utils'
-
 export default {
-  components: { VueCropper },
   data() {
     return {
-      // 是否显示弹出层
-      open: false,
-      // 是否显示cropper
-      visible: false,
-      // 弹出层标题
       title: "修改头像",
-      options: {
+      optionsImg:
-        img: store.getters.avatar,  //裁剪图片的地址
+        store.getters.config.MINIO_ENDPOINT_HTTPS +
-        autoCrop: true,             // 是否默认生成截图框
+        store.getters.userInfo.avatar,
-        autoCropWidth: 200,         // 默认生成截图框宽度
+      // 最大文件大小：500KB
-        autoCropHeight: 200,        // 默认生成截图框高度
+      MAX_FILE_SIZE: 500 * 1024,
-        fixedBox: true,             // 固定截图框大小 不允许改变
+    };
-        outputType:"png",           // 默认生成截图为PNG格式
-        filename: 'avatar'          // 文件名称
-      },
-      previews: {},
-      resizeHandler: null
-    }
   },
   methods: {
-    // 编辑头像
+    // 点击头像触发文件选择
     editCropper() {
-      this.open = true
+      this.$refs.fileInput.click();
     },
-    // 打开弹出层结束时的回调
+    // 文件选择处理
-    modalOpened() {
+    async handleFileSelect(event) {
-      this.visible = true
+      const file = event.target.files[0];
-      if (!this.resizeHandler) {
+      if (!file) return;
-        this.resizeHandler = debounce(() => {
+
-          this.refresh()
+      // 1. 验证文件类型（只能上传图片）
-        }, 100)
+      if (!file.type.startsWith("image/")) {
+        this.$modal.msgError("只能上传图片文件");
+        event.target.value = "";
+        return;
+      }
+
+      // 2文件大小验证（最大500KB）
+      if (file.size > this.MAX_FILE_SIZE) {
+        this.$modal.msgError(
+          `文件大小不能超过 500KB（当前：${this.formatFileSize(file.size)}）`
+        );
+        event.target.value = "";
+        return;
+      }
+
+      try {
+        await this.uploadAvatar(file);
+      } catch (error) {
+        console.error("头像上传失败:", error);
+        this.$modal.msgError("上传失败: " + error.message);
+      } finally {
+        // 清空文件输入
+        event.target.value = "";
       }
-      window.addEventListener("resize", this.resizeHandler)
-    },
-    // 刷新组件
-    refresh() {
-      this.$refs.cropper.refresh()
-    },
-    // 覆盖默认的上传行为
-    requestUpload() {
-    },
-    // 向左旋转
-    rotateLeft() {
-      this.$refs.cropper.rotateLeft()
-    },
-    // 向右旋转
-    rotateRight() {
-      this.$refs.cropper.rotateRight()
-    },
-    // 图片缩放
-    changeScale(num) {
-      num = num || 1
-      this.$refs.cropper.changeScale(num)
     },
-    // 上传预处理
+    // 上传头像到 MinIO
-    beforeUpload(file) {
+    async uploadAvatar(file) {
-      if (file.type.indexOf("image/") == -1) {
+      try {
-        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
+        // 确保 MinIO 配置已加载
-      } else {
+        await this.ensureMinioInitialized();
-        const reader = new FileReader()
+
-        reader.readAsDataURL(file)
+        const config = this.$store.getters.config;
-        reader.onload = () => {
+        const bucket = config.MINIO_BUCKET_AVATAR || "remote-avatar-test";
-          this.options.img = reader.result
+        const timestamp = Date.now();
-          this.options.filename = file.name
+        const ext = file.name.split(".").pop() || "png";
+        const fileName = `${timestamp}.${ext}`;
+        const objectName = `head_portrait/${fileName}`;
+
+        console.log(
+          `Uploading avatar to bucket: ${bucket}, object: ${objectName}`
+        );
+
+        // 使用 MinIO 上传
+        const result = await uploadFile(
+          bucket,
+          objectName,
+          file,
+          {},
+          (percent) => {}
+        );
+
+        console.log("MinIO 上传成功:", result);
+        let avatar = config.MINIO_BUCKET_AVATAR + "/" + result.objectName;
+        // 上传成功后调用业务接口更新用户信息
+        await postUserOpsAvatarUpdate({
+          avatar: avatar,
+        });
+
+        // 更新头像显示
+        const avatarUrl = config.MINIO_ENDPOINT_HTTPS + avatar;
+        this.optionsImg = avatarUrl;
+        store.commit("SET_AVATAR", avatar);
+      } catch (error) {
+        throw error;
       }
+    },
+    // 确保 MinIO 客户端已初始化
+    async ensureMinioInitialized() {
+      const config = this.$store.getters.config;
+      if (!config || !config.MINIO_ENDPOINT) {
+        console.log("MinIO config not loaded, fetching...");
+        await this.$store.dispatch("GetNetConfig");
       }
     },
-    // 上传图片
+    // 格式化文件大小
-    uploadImg() {
+    formatFileSize(bytes) {
-      this.$refs.cropper.getCropBlob(data => {
+      if (bytes < 1024) return bytes + " B";
-        let formData = new FormData()
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
-        formData.append("avatarfile", data, this.options.filename)
+      return (bytes / (1024 * 1024)).toFixed(2) + " MB";
-        uploadAvatar(formData).then(response => {
-          this.open = false
-          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl
-          store.commit('SET_AVATAR', this.options.img)
-          this.$modal.msgSuccess("修改成功")
-          this.visible = false
-        })
-      })
     },
-    // 实时预览
-    realTime(data) {
-      this.previews = data
   },
-    // 关闭窗口
+};
-    closeDialog() {
-      this.options.img = store.getters.avatar
-      this.visible = false
-      window.removeEventListener("resize", this.resizeHandler)
-    }
-  }
-}
 </script>
+
 <style scoped lang="scss">
 .user-info-head {
   position: relative;
@@ -165,7 +136,7 @@ export default {
 }
 
 .user-info-head:hover:after {
-  content: '+';
+  content: "+";
   position: absolute;
   left: 0;
   right: 0;
@@ -181,4 +152,15 @@ export default {
   line-height: 110px;
   border-radius: 50%;
 }
+
+.upload-progress-container {
+  padding: 20px;
+}
+
+.upload-progress-info {
+  margin-bottom: 15px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
 </style>