linweidong
/
besure_server
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: avatar

Browse Source
plp
xingyu4j 3 years ago
parent 770bf45f01
commit d8be452fd8
2 changed files with 101 additions and 84 deletions
Show Stats Download Patch File Download Diff File

2
yudao-ui-admin-vue3/src/api/system/user/profile.ts
Unescape Escape View File

@ -73,5 +73,5 @@ export const updateUserPwdApi = (oldPassword: string, newPassword: string) => {
// 用户头像上传 // 用户头像上传
export const uploadAvatarApi = (data) => { export const uploadAvatarApi = (data) => {
return request.upload({ url: '/system/user/profile/update-avatar', data: data }) return request.put({ url: '/system/user/profile/update-avatar', data })
} }

183
yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue
Unescape Escape View File

@ -1,3 +1,92 @@
<template>
<div class="user-info-head" @click="editCropper()">
<img :src="options.options.img" title="点击上传头像" class="img-circle img-lg" alt="" />
</div>
<el-dialog
v-model="dialogVisible"
title="编辑头像"
width="800px"
append-to-body
style="padding: 30px 20px"
@opened="modalOpened"
>
<el-row>
<el-col :xs="24" :md="12" style="height: 350px">
<VueCropper
ref="cropper"
v-if="cropperVisible"
:img="options.options.img"
:info="true"
:autoCrop="options.options.autoCrop"
:autoCropWidth="options.options.autoCropWidth"
:autoCropHeight="options.options.autoCropHeight"
:fixedBox="options.options.fixedBox"
@real-time="realTime"
/>
</el-col>
<el-col :xs="24" :md="12" style="height: 350px">
<div
class="avatar-upload-preview"
:style="{
width: options.previews.w + 'px',
height: options.previews.h + 'px',
overflow: 'hidden',
margin: '5px'
}"
>
<div :style="options.previews.div">
<img
:src="options.previews.url"
:style="options.previews.img"
style="!max-width: 100%"
alt=""
/>
</div>
</div>
</el-col>
</el-row>
<template #footer>
<el-row>
<el-col :lg="2" :md="2">
<el-upload
action="#"
:http-request="requestUpload"
:show-file-list="false"
:before-upload="beforeUpload"
>
<el-button size="small">
<Icon icon="ep:upload-filled" class="mr-5px" />
选择
</el-button>
</el-upload>
</el-col>
<el-col :lg="{ span: 1, offset: 2 }" :md="2">
<el-button size="small" @click="changeScale(1)">
<Icon icon="ep:zoom-in" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button size="small" @click="changeScale(-1)">
<Icon icon="ep:zoom-out" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button size="small" @click="rotateLeft()">
<Icon icon="ep:arrow-left-bold" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button size="small" @click="rotateRight()">
<Icon icon="ep:arrow-right-bold" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 2, offset: 6 }" :md="2">
<el-button size="small" type="primary" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</template>
</el-dialog>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from 'vue' import { ref, reactive, watch } from 'vue'
import 'vue-cropper/dist/index.css' import 'vue-cropper/dist/index.css'
@ -12,7 +101,6 @@ const props = defineProps({
img: propTypes.string.def('') img: propTypes.string.def('')
}) })
const options = reactive({ const options = reactive({
dialogTitle: '编辑头像',
options: { options: {
img: props.img, //裁剪图片的地址 img: props.img, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框 autoCrop: true, // 是否默认生成截图框
@ -22,7 +110,10 @@ const options = reactive({
}, },
previews: { previews: {
img: '', img: '',
url: '' url: '',
w: 0,
h: 0,
div: ''
} }
}) })
/** 编辑头像 */ /** 编辑头像 */
@ -66,8 +157,12 @@ const beforeUpload = (file: Blob) => {
const uploadImg = () => { const uploadImg = () => {
cropper.value.getCropBlob((data: any) => { cropper.value.getCropBlob((data: any) => {
let formData = new FormData() let formData = new FormData()
formData.append('avatarfile', data) formData.append('avatarFile', data)
uploadAvatarApi(formData) uploadAvatarApi(formData).then((res) => {
options.options.img = res
})
dialogVisible.value = false
cropperVisible.value = false
}) })
} }
/** 实时预览 */ /** 实时预览 */
@ -85,85 +180,7 @@ watch(
} }
) )
</script> </script>
<template>
<div class="user-info-head" @click="editCropper()">
<img :src="options.options.img" title="点击上传头像" class="img-circle img-lg" alt="" />
</div>
<el-dialog
v-model="dialogVisible"
:title="options.dialogTitle"
width="800px"
append-to-body
style="padding: 30px 20px"
@opened="modalOpened"
>
<el-row>
<el-col :xs="24" :md="12" style="height: 350px">
<VueCropper
ref="cropper"
:img="options.options.img"
:info="true"
:autoCrop="options.options.autoCrop"
:autoCropWidth="options.options.autoCropWidth"
:autoCropHeight="options.options.autoCropHeight"
:fixedBox="options.options.fixedBox"
@real-time="realTime"
v-if="cropperVisible"
/>
</el-col>
<el-col :xs="24" :md="12" style="height: 350px">
<div class="avatar-upload-preview">
<img
:src="options.previews.url"
:style="options.previews.img"
style="!max-width: 100%"
alt=""
/>
</div>
</el-col>
</el-row>
<template #footer>
<el-row>
<el-col :lg="2" :md="2">
<el-upload
action="#"
:http-request="requestUpload"
:show-file-list="false"
:before-upload="beforeUpload"
>
<el-button size="small">
<Icon icon="ep:upload-filled" class="mr-5px" />
选择
</el-button>
</el-upload>
</el-col>
<el-col :lg="{ span: 1, offset: 2 }" :md="2">
<el-button size="small" @click="changeScale(1)">
<Icon icon="ep:zoom-in" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button size="small" @click="changeScale(-1)">
<Icon icon="ep:zoom-out" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button size="small" @click="rotateLeft()">
<Icon icon="ep:arrow-left-bold" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button size="small" @click="rotateRight()">
<Icon icon="ep:arrow-right-bold" class="mr-5px" />
</el-button>
</el-col>
<el-col :lg="{ span: 2, offset: 6 }" :md="2">
<el-button size="small" type="primary" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</template>
</el-dialog>
</template>
<style scoped> <style scoped>
.user-info-head { .user-info-head {
position: relative; position: relative;

Write Preview
Loading…
Cancel
Save