| | |
|---|
| | | <template> |
|---|
| | | <div class="user-info-head" @click="editCropper()"> |
|---|
| | | <img :src="options.img" title="点击上传头像" class="img-circle img-lg" /> |
|---|
| | | <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> |
|---|
| | | <el-dialog v-model="open" :title="title" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> |
|---|
| | | <el-row> |
|---|
| | | <el-col :xs="24" :md="12" :style="{ height: '350px' }"> |
|---|
| | | <vue-cropper |
|---|
| | |
|---|
| | | import { VueCropper } from 'vue-cropper'; |
|---|
| | | import { uploadAvatar } from '@/api/system/user'; |
|---|
| | | import useUserStore from '@/store/modules/user'; |
|---|
| | | import { UploadRawFile } from 'element-plus'; |
|---|
| | | |
|---|
| | | interface Options { |
|---|
| | | img: string | any; // 裁剪图片的地址 |
|---|
| | |
|---|
| | | cropper.value.changeScale(num); |
|---|
| | | }; |
|---|
| | | /** 上传预处理 */ |
|---|
| | | const beforeUpload = (file: any) => { |
|---|
| | | const beforeUpload = (file: UploadRawFile): any => { |
|---|
| | | if (file.type.indexOf('image/') == -1) { |
|---|
| | | proxy?.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。'); |
|---|
| | | } else { |
|---|
| | |
|---|
| | | const res = await uploadAvatar(formData); |
|---|
| | | open.value = false; |
|---|
| | | options.img = res.data.imgUrl; |
|---|
| | | userStore.setAvatar(options.img as string) |
|---|
| | | proxy?.$modal.msgSuccess("修改成功"); |
|---|
| | | userStore.setAvatar(options.img); |
|---|
| | | proxy?.$modal.msgSuccess('修改成功'); |
|---|
| | | visible.value = false; |
|---|
| | | }); |
|---|
| | | }; |
|---|
