HIYL-localization-web/src/views/system/user/profile/userAvatar.vue

<template>
  <div>
    <div class="user-info-head" @click="editCropper()">
      <img
        v-bind:src="optionsImg"
        title="点击上传头像"
        class="img-circle img-lg"
      />
    </div>
    <!-- 文件选择隐藏输入 -->
    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="handleFileSelect"
    />
  </div>
</template>

<script>
import store from "@/store";
import { postUserOpsAvatarUpdate } from "@/api/system/user";
import { uploadFile } from "@/utils/requestMinio";
export default {
  data() {
    return {
      title: "修改头像",
      optionsImg:
        store.getters.config.MINIO_ENDPOINT_HTTPS +
        store.getters.userInfo.avatar,
      // 最大文件大小：500KB
      MAX_FILE_SIZE: 500 * 1024,
    };
  },
  methods: {
    // 点击头像触发文件选择
    editCropper() {
      this.$refs.fileInput.click();
    },
    // 文件选择处理
    async handleFileSelect(event) {
      const file = event.target.files[0];
      if (!file) return;

      // 1. 验证文件类型（只能上传图片）
      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 = "";
      }
    },
    // 上传头像到 MinIO
    async uploadAvatar(file) {
      try {
        // 确保 MinIO 配置已加载
        await this.ensureMinioInitialized();

        const config = this.$store.getters.config;
        const bucket = config.MINIO_BUCKET_AVATAR || "remote-avatar-test";
        const timestamp = Date.now();
        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");
      }
    },
    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes < 1024) return bytes + " B";
      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
      return (bytes / (1024 * 1024)).toFixed(2) + " MB";
    },
  },
};
</script>

<style scoped lang="scss">
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  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>