Kaynağa Gözat

fix:修复用户信息页面上传图片没有回显的问题

yangyi 4 ay önce
ebeveyn
işleme
dcf71763d5
1 değiştirilmiş dosya ile 7 ekleme ve 1 silme
  1. 7 1
      src/view/Profile.vue

+ 7 - 1
src/view/Profile.vue

@@ -4,7 +4,7 @@
 
     <el-card class="profile-card">
       <div class="avatar-section">
-        <el-avatar :size="80" :src="userStore.state.avatarUrl">
+        <el-avatar :size="80" :src="avatarPreviewUrl || userStore.state.avatarUrl">
           {{ userStore.state.nickname.charAt(0) }}
         </el-avatar>
         <el-button size="small" @click="triggerUpload">修改头像</el-button>
@@ -111,6 +111,7 @@ const fileInputRef = ref<HTMLInputElement | null>(null)
 const nickname = ref(userStore.state.nickname)
 const signature = ref('')
 const avatarFile = ref<File | null>(null)
+const avatarPreviewUrl = ref('')
 const saving = ref(false)
 
 const dialogVisible = ref(false)
@@ -190,6 +191,7 @@ const handleAvatarChange = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files?.length) {
     avatarFile.value = target.files[0]
+    avatarPreviewUrl.value = URL.createObjectURL(target.files[0])
   }
 }
 
@@ -227,6 +229,10 @@ const handleSave = async () => {
       if (res.data?.avatarUrl) {
         userStore.updateProfile({ avatarUrl: res.data.avatarUrl })
       }
+      if (avatarPreviewUrl.value) {
+        URL.revokeObjectURL(avatarPreviewUrl.value)
+        avatarPreviewUrl.value = ''
+      }
       ElMessage.success('保存成功')
     }
   } catch (err: unknown) {