feat(admin-backend): add user avatar upload endpoint for admins

music-houduan/src/main/java/com/test/musichouduan/controller/UserController.java

@@ -207,6 +207,27 @@ public class UserController {
         return Result.success("更新成功", userDTO);
     }
 
+    /**
+     * 管理员上传指定用户头像
+     *
+     * @param id 用户ID
+     * @param file 头像文件
+     * @return 响应结果
+     */
+    @Operation(summary = "管理员上传用户头像", description = "管理员上传指定用户头像并更新用户信息，需要管理员权限")
+    @SaCheckRole("admin")
+    @PostMapping("/{id}/upload/avatar")
+    public Result<String> adminUploadUserAvatar(
+            @Parameter(description = "用户ID", example = "1") @PathVariable Long id,
+            @Parameter(description = "头像文件") @RequestParam("file") MultipartFile file) {
+        String avatarPhysicalPath = fileService.uploadImage(file);
+        String avatarUrl = avatarPhysicalPath.replace(System.getProperty("user.dir") + File.separator + "music-houduan", "").replace(File.separator, "/");
+
+        userService.adminUpdateUserAvatar(id, avatarUrl);
+
+        return Result.success("上传成功", avatarUrl);
+    }
+
     /**
      * 上传用户头像
      *

music-houduan/src/main/java/com/test/musichouduan/service/UserService.java

@@ -107,6 +107,15 @@ public interface UserService {
      */
     UserDTO adminUpdateUser(Long id, UserUpdateRequest request);
 
+    /**
+     * 管理员上传并更新指定用户头像
+     *
+     * @param id 用户ID
+     * @param avatar 头像地址
+     * @return 用户DTO
+     */
+    UserDTO adminUpdateUserAvatar(Long id, String avatar);
+
     /**
      * 根据ID获取用户实体
      *

music-houduan/src/main/java/com/test/musichouduan/service/impl/FileServiceImpl.java

@@ -48,9 +48,9 @@ public class FileServiceImpl implements FileService {
         // 检查文件类型
         String originalFilename = file.getOriginalFilename();
         String extension = getFileExtension(originalFilename);
-        List<String> imageTypes = Arrays.asList("jpg", "jpeg", "png", "gif");
+        List<String> imageTypes = Arrays.asList("jpg", "jpeg", "png", "gif", "webp");
         if (!imageTypes.contains(extension.toLowerCase())) {
-            throw new BusinessException("只能上传jpg、jpeg、png、gif格式的图片");
+            throw new BusinessException("只能上传jpg、jpeg、png、gif、webp格式的图片");
         }
 
         // 上传文件

music-houduan/src/main/java/com/test/musichouduan/service/impl/UserServiceImpl.java

@@ -329,6 +329,15 @@ public class UserServiceImpl implements UserService {
         return convertToDTO(savedUser);
     }
 
+    @Override
+    @Transactional
+    public UserDTO adminUpdateUserAvatar(Long id, String avatar) {
+        User user = getById(id);
+        user.setAvatar(avatar);
+        User savedUser = userRepository.save(user);
+        return convertToDTO(savedUser);
+    }
+
     @Override
     public User getById(Long id) {
         return userRepository.findById(id)

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>