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 | 73 | |
| 74 | 74 | // 用户头像上传 |
| 75 | 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 | 90 | <script setup lang="ts"> |
| 2 | 91 | import { ref, reactive, watch } from 'vue' |
| 3 | 92 | import 'vue-cropper/dist/index.css' |
| ... | ... | @@ -12,7 +101,6 @@ const props = defineProps({ |
| 12 | 101 | img: propTypes.string.def('') |
| 13 | 102 | }) |
| 14 | 103 | const options = reactive({ |
| 15 | - dialogTitle: '编辑头像', | |
| 16 | 104 | options: { |
| 17 | 105 | img: props.img, //裁剪图片的地址 |
| 18 | 106 | autoCrop: true, // 是否默认生成截图框 |
| ... | ... | @@ -22,7 +110,10 @@ const options = reactive({ |
| 22 | 110 | }, |
| 23 | 111 | previews: { |
| 24 | 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 | 157 | const uploadImg = () => { |
| 67 | 158 | cropper.value.getCropBlob((data: any) => { |
| 68 | 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 | 180 | } |
| 86 | 181 | ) |
| 87 | 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 | 184 | <style scoped> |
| 168 | 185 | .user-info-head { |
| 169 | 186 | position: relative; | ... | ... |