完成个人信息头像更换

luohairen

2024-10-29 a38b2ce4cf02b6ac7069ac89517287bf78f4dfdf

完成个人信息头像更换

 src/api/user.js

@@ -13,4 +13,5 @@
  studentList: () => get('/api/admin/user/student/list'),
  getClassesCurrentUserList: (param) => get('/api/admin/user/classes/students', param),
  updatePassword: (data) => post('/api/common/user/update/password', data),
  uploadImg: (data) => post('/api/admin/upload/img', data),
}

 src/views/profile/components/UserCard.vue

@@ -6,7 +6,22 @@

    <div class="user-profile">
      <div class="box-center">
        <img :src="userInfo.imagePath === null ? require('@/assets/avatar.gif') : userInfo.imagePath " height="100px" width="100px" style="border-radius: 50px">
        <input
          type="file"
          @change="changeHeadPortrait"
          accept=".jpg, .png"
          style="display: none"
          ref="fileHeadPortrait"
          id="fileHeadPortrait"
        />

        <img :src="userInfo.imagePath?'api/files/' + userInfo.imagePath : '/static/icons/touxiang.png'"
             height="100px"
             width="100px"
             style="border-radius: 50px"
             @click="uploadImage"
             class="img"
             id="headPortrait">
      </div>
      <div class="box-center">
        <div class="user-name text-center">{{ userInfo.userName }}</div>
@@ -18,8 +33,14 @@

<script>
import { mapGetters, mapState } from 'vuex'
import userApi from '@/api/user'

export default {
  data() {
    return {
      uploadUrl: 'http://localhost:8000/api/upload/upload'
    }
  },
  props: {
    userInfo: {
      type: Object,
@@ -40,8 +61,31 @@
    ...mapState('enumItem', {
      roleEnum: state => state.user.roleEnum
    })
  },
  methods: {
    changeHeadPortrait(e) {
      let formData = new FormData();
      if (e.target.files[0]) {
        formData.set("file", e.target.files[0]);
        userApi.uploadImg(formData).then(
          this.$message.success('上传成功'),
        );
      }
    },
    uploadImage(){
      let logoFile = document.getElementById("fileHeadPortrait");
      if (logoFile) {
        logoFile.click();
      }
    },
    getPage() {
      userApi.getCurrentUser.then(re => {
        let _this = this
        _this.userInfo = re.data
      })
    }
  }
}
};
</script>

<style lang="scss" scoped>