fix: avatar

yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue

@@ -1,97 +1,10 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
-import 'vue-cropper/dist/index.css'
-import { VueCropper } from 'vue-cropper'
-import { ElRow, ElCol, ElUpload, ElMessage, ElDialog } from 'element-plus'
-import { propTypes } from '@/utils/propTypes'
-import { uploadAvatarApi } from '@/api/system/user/profile'
-const cropper = ref()
-const dialogVisible = ref(false)
-const cropperVisible = ref(false)
-const props = defineProps({
-  img: propTypes.string.def('')
-})
-const options = reactive({
-  dialogTitle: '编辑头像',
-  options: {
-    img: props.img, //裁剪图片的地址
-    autoCrop: true, // 是否默认生成截图框
-    autoCropWidth: 200, // 默认生成截图框宽度
-    autoCropHeight: 200, // 默认生成截图框高度
-    fixedBox: true // 固定截图框大小 不允许改变
-  },
-  previews: {
-    img: '',
-    url: ''
-  }
-})
-/** 编辑头像 */
-const editCropper = () => {
-  dialogVisible.value = true
-}
-// 打开弹出层结束时的回调
-const modalOpened = () => {
-  cropperVisible.value = true
-}
-/** 向左旋转 */
-const rotateLeft = () => {
-  cropper.value.rotateLeft()
-}
-/** 向右旋转 */
-const rotateRight = () => {
-  cropper.value.rotateRight()
-}
-/** 图片缩放 */
-const changeScale = (num: number) => {
-  num = num || 1
-  cropper.value.changeScale(num)
-}
-// 覆盖默认的上传行为
-const requestUpload: any = () => {}
-/** 上传预处理 */
-const beforeUpload = (file: Blob) => {
-  if (file.type.indexOf('image/') == -1) {
-    ElMessage('文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。')
-  } else {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = () => {
-      if (reader.result) {
-        options.options.img = reader.result as string
-      }
-    }
-  }
-}
-/** 上传图片 */
-const uploadImg = () => {
-  cropper.value.getCropBlob((data: any) => {
-    let formData = new FormData()
-    formData.append('avatarfile', data)
-    uploadAvatarApi(formData)
-  })
-}
-/** 实时预览 */
-const realTime = (data: any) => {
-  options.previews = data
-}
-watch(
-  () => props.img,
-  () => {
-    if (props.img) {
-      options.options.img = props.img
-      options.previews.img = props.img
-      options.previews.url = props.img
-    }
-  }
-)
-</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"
+    title="编辑头像"
     width="800px"
     append-to-body
     style="padding: 30px 20px"
@@ -101,6 +14,7 @@ watch(
       <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"
@@ -108,17 +22,26 @@ watch(
           :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
+          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>
@@ -164,6 +87,100 @@ watch(
     </template>
   </el-dialog>
 </template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import 'vue-cropper/dist/index.css'
+import { VueCropper } from 'vue-cropper'
+import { ElRow, ElCol, ElUpload, ElMessage, ElDialog } from 'element-plus'
+import { propTypes } from '@/utils/propTypes'
+import { uploadAvatarApi } from '@/api/system/user/profile'
+const cropper = ref()
+const dialogVisible = ref(false)
+const cropperVisible = ref(false)
+const props = defineProps({
+  img: propTypes.string.def('')
+})
+const options = reactive({
+  options: {
+    img: props.img, //裁剪图片的地址
+    autoCrop: true, // 是否默认生成截图框
+    autoCropWidth: 200, // 默认生成截图框宽度
+    autoCropHeight: 200, // 默认生成截图框高度
+    fixedBox: true // 固定截图框大小 不允许改变
+  },
+  previews: {
+    img: '',
+    url: '',
+    w: 0,
+    h: 0,
+    div: ''
+  }
+})
+/** 编辑头像 */
+const editCropper = () => {
+  dialogVisible.value = true
+}
+// 打开弹出层结束时的回调
+const modalOpened = () => {
+  cropperVisible.value = true
+}
+/** 向左旋转 */
+const rotateLeft = () => {
+  cropper.value.rotateLeft()
+}
+/** 向右旋转 */
+const rotateRight = () => {
+  cropper.value.rotateRight()
+}
+/** 图片缩放 */
+const changeScale = (num: number) => {
+  num = num || 1
+  cropper.value.changeScale(num)
+}
+// 覆盖默认的上传行为
+const requestUpload: any = () => {}
+/** 上传预处理 */
+const beforeUpload = (file: Blob) => {
+  if (file.type.indexOf('image/') == -1) {
+    ElMessage('文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。')
+  } else {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => {
+      if (reader.result) {
+        options.options.img = reader.result as string
+      }
+    }
+  }
+}
+/** 上传图片 */
+const uploadImg = () => {
+  cropper.value.getCropBlob((data: any) => {
+    let formData = new FormData()
+    formData.append('avatarFile', data)
+    uploadAvatarApi(formData).then((res) => {
+      options.options.img = res
+    })
+    dialogVisible.value = false
+    cropperVisible.value = false
+  })
+}
+/** 实时预览 */
+const realTime = (data: any) => {
+  options.previews = data
+}
+watch(
+  () => props.img,
+  () => {
+    if (props.img) {
+      options.options.img = props.img
+      options.previews.img = props.img
+      options.previews.url = props.img
+    }
+  }
+)
+</script>
+
 <style scoped>
 .user-info-head {
   position: relative;