From a38b2ce4cf02b6ac7069ac89517287bf78f4dfdf Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期二, 29 十月 2024 14:13:56 +0800
Subject: [PATCH] 完成个人信息头像更换
---
src/views/profile/components/UserCard.vue | 48 ++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 46 insertions(+), 2 deletions(-)
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
index 59f37b0..567ff28 100644
--- a/src/views/profile/components/UserCard.vue
+++ b/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>
--
Gitblit v1.8.0