fix(admin-user): refresh avatar preview after remove and re-upload

music-qianduan/src/views/admin/UserManagement.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Search, Edit, Plus } from '@element-plus/icons-vue'
 import { getUserList, deleteUser, updateUserStatus, getUserById, adminUpdateUser, adminUploadUserAvatar } from '../../api/admin/user'
+import { processImageUrl } from '../../utils/imageUtils'
 
 // 用户列表
 const userList = ref([])
@@ -41,6 +42,23 @@ const editFormRules = {
 const editFormRef = ref(null)
 const editLoading = ref(false)
 const avatarUploading = ref(false)
+const avatarPreviewVersion = ref(Date.now())
+
+const avatarPreviewUrl = computed(() => {
+  if (!editForm.avatar) return ''
+  const avatarUrl = processImageUrl(editForm.avatar)
+  const separator = avatarUrl.includes('?') ? '&' : '?'
+  return `${avatarUrl}${separator}t=${avatarPreviewVersion.value}`
+})
+
+const resolveAvatarPath = (avatarData) => {
+  if (!avatarData) return ''
+  if (typeof avatarData === 'string') return avatarData
+  if (typeof avatarData === 'object') {
+    return avatarData.avatar || avatarData.url || avatarData.path || avatarData.filePath || ''
+  }
+  return ''
+}
 
 const handleAvatarBeforeUpload = (file) => {
   const isAllowedType = ['image/jpeg', 'image/png', 'image/webp'].includes(file.type)
@@ -69,7 +87,8 @@ const handleAvatarUpload = async ({ file }) => {
   try {
     const res = await adminUploadUserAvatar(editForm.id, file)
     if (res.code === 200) {
-      editForm.avatar = res.data
+      editForm.avatar = resolveAvatarPath(res.data)
+      avatarPreviewVersion.value = Date.now()
       ElMessage.success('头像上传成功')
     } else {
       ElMessage.error(res.message || '头像上传失败')
@@ -84,6 +103,7 @@ const handleAvatarUpload = async ({ file }) => {
 
 const handleAvatarRemove = () => {
   editForm.avatar = ''
+  avatarPreviewVersion.value = Date.now()
 }
 
 // 获取用户列表
@@ -186,6 +206,7 @@ const handleEdit = async (id) => {
       editForm.avatar = user.avatar || ''
       editForm.gender = user.gender || 0
       editForm.introduction = user.introduction || ''
+      avatarPreviewVersion.value = Date.now()
 
       // 显示对话框
       editDialogVisible.value = true
@@ -412,7 +433,7 @@ onMounted(() => {
           :disabled="avatarUploading || editLoading"
         >
           <div class="avatar-uploader-content" v-loading="avatarUploading">
-            <el-avatar v-if="editForm.avatar" :size="60" :src="editForm.avatar"></el-avatar>
+            <el-avatar v-if="editForm.avatar" :size="60" :src="avatarPreviewUrl"></el-avatar>
             <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
           </div>
         </el-upload>