dengzedong
2024-12-17 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7
提交 | 用户 | 时间
820397 1 <template>
H 2   <div class="change-avatar">
3     <CropperAvatar
4       ref="cropperRef"
5       :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
6       :showBtn="false"
7       :value="img"
8       width="120px"
9       @change="handelUpload"
10     />
11   </div>
12 </template>
13 <script lang="ts" setup>
14 import { propTypes } from '@/utils/propTypes'
15 import { uploadAvatar } from '@/api/system/user/profile'
16 import { CropperAvatar } from '@/components/Cropper'
17 import { useUserStore } from '@/store/modules/user'
18
19
20 defineOptions({ name: 'UserAvatar' })
21
22 defineProps({
23   img: propTypes.string.def('')
24 })
25
26 const userStore = useUserStore()
27
28
29 const cropperRef = ref()
30 const handelUpload = async ({ data }) => {
31   const res = await uploadAvatar({ avatarFile: data })
32   cropperRef.value.close()
33   userStore.setUserAvatarAction(res.data)
34 }
35 </script>
36
37 <style lang="scss" scoped>
38 .change-avatar {
39   img {
40     display: block;
41     margin-bottom: 15px;
42     border-radius: 50%;
43   }
44 }
45 </style>