提交

web/src/views/system/user/profile/userAvatar.vue

@@ -2,7 +2,7 @@
   <div class="user-info-head" @click="editCropper()">
     <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
     <el-dialog v-model="open" :title="title" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
-      <el-row>
+      <el-row justify="center">
         <el-col :xs="24" :md="12" :style="{ height: '350px' }">
           <vue-cropper
             v-if="visible"
@@ -17,40 +17,23 @@
             @real-time="realTime"
           />
         </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" />
-          </div>
-        </el-col>
       </el-row>
       <br />
-      <el-row>
-        <el-col :lg="2" :md="2">
-          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
-            <el-button>
-              选择
-              <el-icon class="el-icon--right">
-                <Upload />
-              </el-icon>
-            </el-button>
-          </el-upload>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
-          <el-button icon="Plus" @click="changeScale(1)"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button icon="Minus" @click="changeScale(-1)"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
-          <el-button type="primary" @click="uploadImg()">提 交</el-button>
-        </el-col>
-      </el-row>
+      <div class="avatar-actions">
+        <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+          <el-button>
+            选择
+            <el-icon class="el-icon--right">
+              <Upload />
+            </el-icon>
+          </el-button>
+        </el-upload>
+        <el-button icon="Plus" @click="changeScale(1)"></el-button>
+        <el-button icon="Minus" @click="changeScale(-1)"></el-button>
+        <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
+        <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
+        <el-button type="primary" @click="uploadImg()">提 交</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -84,13 +67,13 @@ const title = ref('修改头像');
 const cropper = ref<any>({});
 //图片裁剪数据
 const options = reactive<Options>({
-  img: userStore.avatar,
+  img: userStore.avatarUrl || userStore.avatar,
   autoCrop: true,
   autoCropWidth: 200,
   autoCropHeight: 200,
   fixedBox: true,
   outputType: 'png',
-  fileName: '',
+  fileName: 'avatar.png',
   previews: {},
   visible: false
 });
@@ -134,14 +117,20 @@ const beforeUpload = (file: UploadRawFile): any => {
 /** 上传图片 */
 const uploadImg = async () => {
   cropper.value.getCropBlob(async (data: any) => {
-    const formData = new FormData();
-    formData.append('avatarfile', data, options.fileName);
-    const res = await uploadAvatar(formData);
-    open.value = false;
-    options.img = res.data.imgUrl;
-    userStore.setAvatar(options.img);
-    proxy?.$modal.msgSuccess('修改成功');
-    visible.value = false;
+    try {
+      const formData = new FormData();
+      const fileName = options.fileName || `avatar.${options.outputType || 'png'}`;
+      formData.append('avatarfile', data, fileName);
+      const res = await uploadAvatar(formData);
+      await userStore.getInfo(); // 刷新用户信息以获取最新的oss_id
+      options.img = res?.data?.imgUrl || userStore.avatarUrl || userStore.avatar;
+      open.value = false;
+      proxy?.$modal.msgSuccess('修改成功');
+    } catch (error) {
+      proxy?.$modal.msgError('上传失败，请重试');
+    } finally {
+      visible.value = false;
+    }
   });
 };
 /** 实时预览 */
@@ -150,7 +139,7 @@ const realTime = (data: any) => {
 };
 /** 关闭窗口 */
 const closeDialog = () => {
-  options.img = userStore.avatar;
+  options.img = userStore.avatarUrl || userStore.avatar;
   options.visible = false;
 };
 </script>
@@ -179,4 +168,12 @@ const closeDialog = () => {
   line-height: 110px;
   border-radius: 50%;
 }
+
+.avatar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
 </style>