增加头像修改功能

src/api/user.js

@@ -43,3 +43,8 @@ export const userModifyPassword = async (obj) => {
   await refreshToken()
   return request.post('/user/modifyPwd', getReqBody(obj))
 }
+
+export const userUpdateAvatarService = async (avatar) => {
+  await refreshToken()
+  return request.post('/user/updateAvatar', getReqBody(avatar))
+}

src/components/user/EditeAvatar.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { ref } from 'vue'
+import { userStore } from '@/stores'
+import { Plus, Upload } from '@element-plus/icons-vue'
+import selectAvatar from '@/assets/select_avatar.jpg'
+import { userUpdateAvatarService } from '@/api/user'
+
+defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+const userData = userStore()
+
+const uploadRef = ref()
+const imgUrl = ref(userData.user.avatar)
+const isLoading = ref(false)
+
+const onSelected = (file) => {
+  console.log('onSelected')
+  // 基于FileReader 读取图片做预览
+  const reader = new FileReader()
+  reader.readAsDataURL(file.raw)
+  reader.onload = () => {
+    imgUrl.value = reader.result
+  }
+}
+
+const onSuccess = () => {
+  console.log('onSuccess')
+}
+
+const beforeUpload = () => {
+  console.log('beforeUpload')
+}
+
+const onUpload = () => {
+  console.log('onUpload')
+  isLoading.value = true
+  const res = userUpdateAvatarService(imgUrl.value)
+  res.then(() => {
+    ElMessage.success('头像上传成功')
+    emit('update:modelValue', false)
+  })
+  res.finally(() => {
+    isLoading.value = false
+  })
+}
+
+// 关闭时清除数据
+const onReset = () => {}
+</script>
+
+<template>
+  <el-dialog
+    :modelValue="modelValue"
+    @update:modelValue="emit('update:modelValue', false)"
+    @close="onReset"
+    title="更换头像"
+    width="700"
+  >
+    <div class="edit-avatar">
+      <div class="left-area">
+        <el-upload
+          ref="uploadRef"
+          class="avatar-uploader"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onSelected"
+          :on-success="onSuccess"
+          :before-upload="beforeUpload"
+        >
+          <img :src="imgUrl || selectAvatar" class="avatar" />
+        </el-upload>
+      </div>
+
+      <div class="right-area">
+        <div class="preview-area">
+          <span style="font-size: 16px">预览</span>
+
+          <el-avatar class="preview-100" :src="imgUrl || selectAvatar" />
+          <span>100×100</span>
+          <el-avatar class="preview-40" :src="imgUrl || selectAvatar" />
+          <span>40×40</span>
+        </div>
+        <div class="button-area">
+          <el-button
+            type="primary"
+            :icon="Plus"
+            size="large"
+            @click="uploadRef.$el.querySelector('input').click()"
+          >
+            选择图片
+          </el-button>
+          <el-button
+            type="success"
+            :icon="Upload"
+            size="large"
+            @click="onUpload"
+            :loading="isLoading"
+          >
+            上传头像
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.edit-avatar {
+  display: flex;
+  .right-area {
+    // width: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 20px;
+
+    .preview-area {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .el-avatar {
+        margin-top: 30px;
+      }
+    }
+
+    .button-area {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      margin-bottom: 5px;
+    }
+  }
+
+  .preview-100 {
+    width: 100px;
+    height: 100px;
+  }
+
+  .preview-40 {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+img {
+  width: 400px;
+  height: 400px;
+  object-fit: cover;
+  text-align: center;
+  border-radius: 10px;
+}
+</style>

src/views/layout/LayoutContainer.vue

@@ -113,6 +113,10 @@ const onExit = async () => {
       margin-top: 20px;
       margin-bottom: 30px;
       cursor: pointer;
+      .el-avatar {
+        width: 40px;
+        height: 40px;
+      }
     }
 
     .el-menu {

src/views/setting/SettingPersonal.vue

@@ -6,11 +6,13 @@ import { userModifySelfService } from '@/api/user'
 import defaultImg from '@/assets/select_avatar.jpg'
 import { cloneDeep, isEqual } from 'lodash'
 import { maskPhoneNum } from '@/utils/common'
+import EditeAvatar from '@/components/user/EditeAvatar.vue'
 
 const userData = userStore()
 // 准备表单数据
 const formModel = ref({})
 const isLoading = ref(false)
+const isShowEditeAvatar = ref(false)
 
 onMounted(() => {
   formModel.value = cloneDeep(userData.user)
@@ -50,9 +52,14 @@ const displayPhone = computed(() => {
         <img
           :src="userData.user.avatar || defaultImg"
           alt="图片加载错误"
-          style="text-align: center"
+          @click="isShowEditeAvatar = true"
+          style="text-align: center; border-radius: 10px"
         />
-        <el-button type="info" round style="margin-top: 20px; cursor: pointer">
+        <el-button
+          type="info"
+          @click="isShowEditeAvatar = true"
+          style="margin-top: 20px; cursor: pointer"
+        >
           点击修改头像
         </el-button>
       </el-aside>
@@ -123,6 +130,8 @@ const displayPhone = computed(() => {
         </el-form>
       </el-main>
     </el-container>
+
+    <EditeAvatar v-model="isShowEditeAvatar"></EditeAvatar>
   </el-container>
 </template>