feat(admin-frontend): support avatar file upload in user edit dialog

music-qianduan/src/api/admin/user.js

@@ -67,3 +67,20 @@ export function updateUser(data) {
 export function adminUpdateUser(id, data) {
   return api.put(`/user/${id}`, data)
 }
+
+
+/**
+ * 管理员上传指定用户头像
+ * @param {number} id 用户ID
+ * @param {File} file 头像文件
+ * @returns {Promise<any>}
+ */
+export function adminUploadUserAvatar(id, file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return api.post(`/user/${id}/upload/avatar`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}

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

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, onMounted, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Edit } from '@element-plus/icons-vue'
-import { getUserList, deleteUser, updateUserStatus, getUserById, adminUpdateUser } from '../../api/admin/user'
+import { Search, Edit, Plus } from '@element-plus/icons-vue'
+import { getUserList, deleteUser, updateUserStatus, getUserById, adminUpdateUser, adminUploadUserAvatar } from '../../api/admin/user'
 
 // 用户列表
 const userList = ref([])
@@ -29,39 +29,6 @@ const editForm = reactive({
   gender: 0,
   introduction: ''
 })
-const validateAvatar = (_rule, value, callback) => {
-  if (!value || !String(value).trim()) {
-    callback()
-    return
-  }
-
-  const avatar = String(value).trim()
-
-  // 兼容站内相对路径（如 /upload/xx、./xx、../xx、images/a.png）
-  const hasScheme = /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(avatar)
-  if (!hasScheme) {
-    const isRelativePath = /^(\/?[^\s]+)$/.test(avatar) && !avatar.startsWith('//')
-    if (isRelativePath) {
-      callback()
-      return
-    }
-    callback(new Error('请输入有效头像地址（http/https 或相对路径）'))
-    return
-  }
-
-  try {
-    const url = new URL(avatar)
-    if (url.protocol === 'http:' || url.protocol === 'https:') {
-      callback()
-      return
-    }
-  } catch (_e) {
-    // ignore
-  }
-
-  callback(new Error('请输入有效头像地址（http/https 或相对路径）'))
-}
-
 const editFormRules = {
   nickname: [
     { required: true, message: '请输入昵称', trigger: 'blur' },
@@ -69,13 +36,55 @@ const editFormRules = {
   ],
   email: [
     { pattern: /^\S+@\S+\.\S+$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
-  ],
-  avatar: [
-    { validator: validateAvatar, trigger: 'blur' }
   ]
 }
 const editFormRef = ref(null)
 const editLoading = ref(false)
+const avatarUploading = ref(false)
+
+const handleAvatarBeforeUpload = (file) => {
+  const isAllowedType = ['image/jpeg', 'image/png', 'image/webp'].includes(file.type)
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isAllowedType) {
+    ElMessage.error('头像仅支持 JPG/PNG/WEBP 格式')
+    return false
+  }
+
+  if (!isLt2M) {
+    ElMessage.error('头像大小不能超过 2MB')
+    return false
+  }
+
+  return true
+}
+
+const handleAvatarUpload = async ({ file }) => {
+  if (!editForm.id) {
+    ElMessage.error('请先选择要编辑的用户')
+    return
+  }
+
+  avatarUploading.value = true
+  try {
+    const res = await adminUploadUserAvatar(editForm.id, file)
+    if (res.code === 200) {
+      editForm.avatar = res.data
+      ElMessage.success('头像上传成功')
+    } else {
+      ElMessage.error(res.message || '头像上传失败')
+    }
+  } catch (error) {
+    console.error('上传头像失败:', error)
+    ElMessage.error('头像上传失败，请稍后再试')
+  } finally {
+    avatarUploading.value = false
+  }
+}
+
+const handleAvatarRemove = () => {
+  editForm.avatar = ''
+}
 
 // 获取用户列表
 const fetchUserList = async () => {
@@ -393,11 +402,24 @@ onMounted(() => {
       <el-form-item label="昵称" prop="nickname">
         <el-input v-model="editForm.nickname" placeholder="请输入昵称"></el-input>
       </el-form-item>
-      <el-form-item label="头像" prop="avatar">
-        <el-input v-model="editForm.avatar" placeholder="请输入头像地址"></el-input>
-        <div class="avatar-preview" v-if="editForm.avatar">
-          <el-avatar :size="60" :src="editForm.avatar"></el-avatar>
+      <el-form-item label="头像">
+        <el-upload
+          class="avatar-upload"
+          :http-request="handleAvatarUpload"
+          :before-upload="handleAvatarBeforeUpload"
+          :show-file-list="false"
+          accept=".jpg,.jpeg,.png,.webp"
+          :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-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          </div>
+        </el-upload>
+        <div class="avatar-upload-actions" v-if="editForm.avatar">
+          <el-button link type="danger" @click="handleAvatarRemove">移除头像</el-button>
         </div>
+        <div class="el-upload__tip">支持 jpg/png/webp，大小不超过 2MB</div>
       </el-form-item>
       <el-form-item label="性别">
         <el-radio-group v-model="editForm.gender">
@@ -538,9 +560,33 @@ onMounted(() => {
   border-radius: 12px;
 }
 
-.avatar-preview {
-  margin-top: 10px;
+.avatar-upload :deep(.el-upload) {
+  border: 1px dashed #b3e5fc;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+  overflow: hidden;
+}
+
+.avatar-upload :deep(.el-upload):hover {
+  border-color: #4dd0e1;
+}
+
+.avatar-uploader-content {
+  width: 80px;
+  height: 80px;
   display: flex;
+  align-items: center;
   justify-content: center;
+  background: #f8fdff;
+}
+
+.avatar-uploader-icon {
+  font-size: 24px;
+  color: #8c939d;
+}
+
+.avatar-upload-actions {
+  margin-top: 8px;
 }
 </style>