fix: avatar

yudao-ui-admin-vue3/src/api/system/user/profile.ts

@@ -73,5 +73,5 @@ export const updateUserPwdApi = (oldPassword: string, newPassword: string) => {
 
 // 用户头像上传
 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 })
 }

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

@@ -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">
 import { ref, reactive, watch } from 'vue'
 import 'vue-cropper/dist/index.css'
@@ -12,7 +101,6 @@ const props = defineProps({
   img: propTypes.string.def('')
 })
 const options = reactive({
-  dialogTitle: '编辑头像',
   options: {
     img: props.img, //裁剪图片的地址
     autoCrop: true, // 是否默认生成截图框
@@ -22,7 +110,10 @@ const options = reactive({
   },
   previews: {
     img: '',
-    url: ''
+    url: '',
+    w: 0,
+    h: 0,
+    div: ''
   }
 })
 /** 编辑头像 */
@@ -66,8 +157,12 @@ const beforeUpload = (file: Blob) => {
 const uploadImg = () => {
   cropper.value.getCropBlob((data: any) => {
     let formData = new FormData()
-    formData.append('avatarfile', data)
-    uploadAvatarApi(formData)
+    formData.append('avatarFile', data)
+    uploadAvatarApi(formData).then((res) => {
+      options.options.img = res
+    })
+    dialogVisible.value = false
+    cropperVisible.value = false
   })
 }
 /** 实时预览 */
@@ -85,85 +180,7 @@ watch(
   }
 )
 </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>
 .user-info-head {
   position: relative;