Commit d8be452fd809f71fdb48d6976f9a0fe64177ee57
1 parent
770bf45f
fix: avatar
Showing
2 changed files
with
101 additions
and
84 deletions
yudao-ui-admin-vue3/src/api/system/user/profile.ts
| @@ -73,5 +73,5 @@ export const updateUserPwdApi = (oldPassword: string, newPassword: string) => { | @@ -73,5 +73,5 @@ export const updateUserPwdApi = (oldPassword: string, newPassword: string) => { | ||
| 73 | 73 | ||
| 74 | // 用户头像上传 | 74 | // 用户头像上传 |
| 75 | export const uploadAvatarApi = (data) => { | 75 | export const uploadAvatarApi = (data) => { |
| 76 | - return request.upload({ url: '/system/user/profile/update-avatar', data: data }) | 76 | + return request.put({ url: '/system/user/profile/update-avatar', data }) |
| 77 | } | 77 | } |
yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue
| 1 | +<template> | ||
| 2 | + <div class="user-info-head" @click="editCropper()"> | ||
| 3 | + <img :src="options.options.img" title="点击上传头像" class="img-circle img-lg" alt="" /> | ||
| 4 | + </div> | ||
| 5 | + <el-dialog | ||
| 6 | + v-model="dialogVisible" | ||
| 7 | + title="编辑头像" | ||
| 8 | + width="800px" | ||
| 9 | + append-to-body | ||
| 10 | + style="padding: 30px 20px" | ||
| 11 | + @opened="modalOpened" | ||
| 12 | + > | ||
| 13 | + <el-row> | ||
| 14 | + <el-col :xs="24" :md="12" style="height: 350px"> | ||
| 15 | + <VueCropper | ||
| 16 | + ref="cropper" | ||
| 17 | + v-if="cropperVisible" | ||
| 18 | + :img="options.options.img" | ||
| 19 | + :info="true" | ||
| 20 | + :autoCrop="options.options.autoCrop" | ||
| 21 | + :autoCropWidth="options.options.autoCropWidth" | ||
| 22 | + :autoCropHeight="options.options.autoCropHeight" | ||
| 23 | + :fixedBox="options.options.fixedBox" | ||
| 24 | + @real-time="realTime" | ||
| 25 | + /> | ||
| 26 | + </el-col> | ||
| 27 | + <el-col :xs="24" :md="12" style="height: 350px"> | ||
| 28 | + <div | ||
| 29 | + class="avatar-upload-preview" | ||
| 30 | + :style="{ | ||
| 31 | + width: options.previews.w + 'px', | ||
| 32 | + height: options.previews.h + 'px', | ||
| 33 | + overflow: 'hidden', | ||
| 34 | + margin: '5px' | ||
| 35 | + }" | ||
| 36 | + > | ||
| 37 | + <div :style="options.previews.div"> | ||
| 38 | + <img | ||
| 39 | + :src="options.previews.url" | ||
| 40 | + :style="options.previews.img" | ||
| 41 | + style="!max-width: 100%" | ||
| 42 | + alt="" | ||
| 43 | + /> | ||
| 44 | + </div> | ||
| 45 | + </div> | ||
| 46 | + </el-col> | ||
| 47 | + </el-row> | ||
| 48 | + <template #footer> | ||
| 49 | + <el-row> | ||
| 50 | + <el-col :lg="2" :md="2"> | ||
| 51 | + <el-upload | ||
| 52 | + action="#" | ||
| 53 | + :http-request="requestUpload" | ||
| 54 | + :show-file-list="false" | ||
| 55 | + :before-upload="beforeUpload" | ||
| 56 | + > | ||
| 57 | + <el-button size="small"> | ||
| 58 | + <Icon icon="ep:upload-filled" class="mr-5px" /> | ||
| 59 | + 选择 | ||
| 60 | + </el-button> | ||
| 61 | + </el-upload> | ||
| 62 | + </el-col> | ||
| 63 | + <el-col :lg="{ span: 1, offset: 2 }" :md="2"> | ||
| 64 | + <el-button size="small" @click="changeScale(1)"> | ||
| 65 | + <Icon icon="ep:zoom-in" class="mr-5px" /> | ||
| 66 | + </el-button> | ||
| 67 | + </el-col> | ||
| 68 | + <el-col :lg="{ span: 1, offset: 1 }" :md="2"> | ||
| 69 | + <el-button size="small" @click="changeScale(-1)"> | ||
| 70 | + <Icon icon="ep:zoom-out" class="mr-5px" /> | ||
| 71 | + </el-button> | ||
| 72 | + </el-col> | ||
| 73 | + <el-col :lg="{ span: 1, offset: 1 }" :md="2"> | ||
| 74 | + <el-button size="small" @click="rotateLeft()"> | ||
| 75 | + <Icon icon="ep:arrow-left-bold" class="mr-5px" /> | ||
| 76 | + </el-button> | ||
| 77 | + </el-col> | ||
| 78 | + <el-col :lg="{ span: 1, offset: 1 }" :md="2"> | ||
| 79 | + <el-button size="small" @click="rotateRight()"> | ||
| 80 | + <Icon icon="ep:arrow-right-bold" class="mr-5px" /> | ||
| 81 | + </el-button> | ||
| 82 | + </el-col> | ||
| 83 | + <el-col :lg="{ span: 2, offset: 6 }" :md="2"> | ||
| 84 | + <el-button size="small" type="primary" @click="uploadImg()">提 交</el-button> | ||
| 85 | + </el-col> | ||
| 86 | + </el-row> | ||
| 87 | + </template> | ||
| 88 | + </el-dialog> | ||
| 89 | +</template> | ||
| 1 | <script setup lang="ts"> | 90 | <script setup lang="ts"> |
| 2 | import { ref, reactive, watch } from 'vue' | 91 | import { ref, reactive, watch } from 'vue' |
| 3 | import 'vue-cropper/dist/index.css' | 92 | import 'vue-cropper/dist/index.css' |
| @@ -12,7 +101,6 @@ const props = defineProps({ | @@ -12,7 +101,6 @@ const props = defineProps({ | ||
| 12 | img: propTypes.string.def('') | 101 | img: propTypes.string.def('') |
| 13 | }) | 102 | }) |
| 14 | const options = reactive({ | 103 | const options = reactive({ |
| 15 | - dialogTitle: '编辑头像', | ||
| 16 | options: { | 104 | options: { |
| 17 | img: props.img, //裁剪图片的地址 | 105 | img: props.img, //裁剪图片的地址 |
| 18 | autoCrop: true, // 是否默认生成截图框 | 106 | autoCrop: true, // 是否默认生成截图框 |
| @@ -22,7 +110,10 @@ const options = reactive({ | @@ -22,7 +110,10 @@ const options = reactive({ | ||
| 22 | }, | 110 | }, |
| 23 | previews: { | 111 | previews: { |
| 24 | img: '', | 112 | img: '', |
| 25 | - url: '' | 113 | + url: '', |
| 114 | + w: 0, | ||
| 115 | + h: 0, | ||
| 116 | + div: '' | ||
| 26 | } | 117 | } |
| 27 | }) | 118 | }) |
| 28 | /** 编辑头像 */ | 119 | /** 编辑头像 */ |
| @@ -66,8 +157,12 @@ const beforeUpload = (file: Blob) => { | @@ -66,8 +157,12 @@ const beforeUpload = (file: Blob) => { | ||
| 66 | const uploadImg = () => { | 157 | const uploadImg = () => { |
| 67 | cropper.value.getCropBlob((data: any) => { | 158 | cropper.value.getCropBlob((data: any) => { |
| 68 | let formData = new FormData() | 159 | let formData = new FormData() |
| 69 | - formData.append('avatarfile', data) | ||
| 70 | - uploadAvatarApi(formData) | 160 | + formData.append('avatarFile', data) |
| 161 | + uploadAvatarApi(formData).then((res) => { | ||
| 162 | + options.options.img = res | ||
| 163 | + }) | ||
| 164 | + dialogVisible.value = false | ||
| 165 | + cropperVisible.value = false | ||
| 71 | }) | 166 | }) |
| 72 | } | 167 | } |
| 73 | /** 实时预览 */ | 168 | /** 实时预览 */ |
| @@ -85,85 +180,7 @@ watch( | @@ -85,85 +180,7 @@ watch( | ||
| 85 | } | 180 | } |
| 86 | ) | 181 | ) |
| 87 | </script> | 182 | </script> |
| 88 | -<template> | ||
| 89 | - <div class="user-info-head" @click="editCropper()"> | ||
| 90 | - <img :src="options.options.img" title="点击上传头像" class="img-circle img-lg" alt="" /> | ||
| 91 | - </div> | ||
| 92 | - <el-dialog | ||
| 93 | - v-model="dialogVisible" | ||
| 94 | - :title="options.dialogTitle" | ||
| 95 | - width="800px" | ||
| 96 | - append-to-body | ||
| 97 | - style="padding: 30px 20px" | ||
| 98 | - @opened="modalOpened" | ||
| 99 | - > | ||
| 100 | - <el-row> | ||
| 101 | - <el-col :xs="24" :md="12" style="height: 350px"> | ||
| 102 | - <VueCropper | ||
| 103 | - ref="cropper" | ||
| 104 | - :img="options.options.img" | ||
| 105 | - :info="true" | ||
| 106 | - :autoCrop="options.options.autoCrop" | ||
| 107 | - :autoCropWidth="options.options.autoCropWidth" | ||
| 108 | - :autoCropHeight="options.options.autoCropHeight" | ||
| 109 | - :fixedBox="options.options.fixedBox" | ||
| 110 | - @real-time="realTime" | ||
| 111 | - v-if="cropperVisible" | ||
| 112 | - /> | ||
| 113 | - </el-col> | ||
| 114 | - <el-col :xs="24" :md="12" style="height: 350px"> | ||
| 115 | - <div class="avatar-upload-preview"> | ||
| 116 | - <img | ||
| 117 | - :src="options.previews.url" | ||
| 118 | - :style="options.previews.img" | ||
| 119 | - style="!max-width: 100%" | ||
| 120 | - alt="" | ||
| 121 | - /> | ||
| 122 | - </div> | ||
| 123 | - </el-col> | ||
| 124 | - </el-row> | ||
| 125 | - <template #footer> | ||
| 126 | - <el-row> | ||
| 127 | - <el-col :lg="2" :md="2"> | ||
| 128 | - <el-upload | ||
| 129 | - action="#" | ||
| 130 | - :http-request="requestUpload" | ||
| 131 | - :show-file-list="false" | ||
| 132 | - :before-upload="beforeUpload" | ||
| 133 | - > | ||
| 134 | - <el-button size="small"> | ||
| 135 | - <Icon icon="ep:upload-filled" class="mr-5px" /> | ||
| 136 | - 选择 | ||
| 137 | - </el-button> | ||
| 138 | - </el-upload> | ||
| 139 | - </el-col> | ||
| 140 | - <el-col :lg="{ span: 1, offset: 2 }" :md="2"> | ||
| 141 | - <el-button size="small" @click="changeScale(1)"> | ||
| 142 | - <Icon icon="ep:zoom-in" class="mr-5px" /> | ||
| 143 | - </el-button> | ||
| 144 | - </el-col> | ||
| 145 | - <el-col :lg="{ span: 1, offset: 1 }" :md="2"> | ||
| 146 | - <el-button size="small" @click="changeScale(-1)"> | ||
| 147 | - <Icon icon="ep:zoom-out" class="mr-5px" /> | ||
| 148 | - </el-button> | ||
| 149 | - </el-col> | ||
| 150 | - <el-col :lg="{ span: 1, offset: 1 }" :md="2"> | ||
| 151 | - <el-button size="small" @click="rotateLeft()"> | ||
| 152 | - <Icon icon="ep:arrow-left-bold" class="mr-5px" /> | ||
| 153 | - </el-button> | ||
| 154 | - </el-col> | ||
| 155 | - <el-col :lg="{ span: 1, offset: 1 }" :md="2"> | ||
| 156 | - <el-button size="small" @click="rotateRight()"> | ||
| 157 | - <Icon icon="ep:arrow-right-bold" class="mr-5px" /> | ||
| 158 | - </el-button> | ||
| 159 | - </el-col> | ||
| 160 | - <el-col :lg="{ span: 2, offset: 6 }" :md="2"> | ||
| 161 | - <el-button size="small" type="primary" @click="uploadImg()">提 交</el-button> | ||
| 162 | - </el-col> | ||
| 163 | - </el-row> | ||
| 164 | - </template> | ||
| 165 | - </el-dialog> | ||
| 166 | -</template> | 183 | + |
| 167 | <style scoped> | 184 | <style scoped> |
| 168 | .user-info-head { | 185 | .user-info-head { |
| 169 | position: relative; | 186 | position: relative; |