【m】头像同步

WebApp/client/public/onebyone/connect/connect.js

@@ -179,6 +179,7 @@ function generateUserId() {
 
 // 加载用户设置
 function loadUserSettings() {
+    const defaultAvatar = '/images/p1.png';
     const userSettings = localStorage.getItem('userSettings');
     if (userSettings) {
         try {
@@ -196,18 +197,26 @@ function loadUserSettings() {
             }
 
             // 设置头像
-            if (settings.avatar) {
+            const avatar = settings.avatar || defaultAvatar;
-                document.getElementById('userAvatar').src = settings.avatar;
+            document.getElementById('userAvatar').src = avatar;
-                document.getElementById('avatarPreview').src = settings.avatar;
+            document.getElementById('avatarPreview').src = avatar;
-            }
         } catch (error) {
             console.error('Error loading user settings:', error);
+            // 加载失败时使用默认头像
+            const defaultAvatar = '/images/p1.png';
+            document.getElementById('userAvatar').src = defaultAvatar;
+            document.getElementById('avatarPreview').src = defaultAvatar;
         }
     } else {
         // 生成新的用户ID
         const newUserId = generateUserId();
         document.getElementById('userIdInput').value = newUserId;
 
+        // 使用默认头像
+        const defaultAvatar = '/images/p1.png';
+        document.getElementById('userAvatar').src = defaultAvatar;
+        document.getElementById('avatarPreview').src = defaultAvatar;
+
         // 保存默认设置
         saveSettings();
     }
@@ -215,10 +224,11 @@ function loadUserSettings() {
 
 // 保存用户设置
 function saveSettings() {
+    const defaultAvatar = '/images/p1.png';
     const settings = {
         userId: document.getElementById('userIdInput').value,
         name: document.getElementById('nicknameInput').value || '我',
-        avatar: document.getElementById('avatarPreview').src
+        avatar: document.getElementById('avatarPreview').src || defaultAvatar
     };
 
     localStorage.setItem('userSettings', JSON.stringify(settings));
@@ -246,14 +256,48 @@ function handleAvatarUpload(event) {
             return;
         }
 
-        // 读取图片文件
+        // 创建FormData对象
-        const reader = new FileReader();
+        const formData = new FormData();
-        reader.onload = function(e) {
+        formData.append('avatar', file);
-            const imageUrl = e.target.result;
+        formData.append('userId', document.getElementById('userIdInput').value);
-            document.getElementById('avatarPreview').src = imageUrl;
+
-            showNotification('头像已更新', 'success');
+        // 显示上传中通知
-        };
+        showNotification('正在上传头像...');
-        reader.readAsDataURL(file);
+
+        // 上传头像到服务器
+        fetch('/api/upload/avatar', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('上传失败');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.success && data.avatarUrl) {
+                // 更新预览和本地存储
+                const avatarUrl = data.avatarUrl;
+                document.getElementById('avatarPreview').src = avatarUrl;
+                document.getElementById('userAvatar').src = avatarUrl;
+
+                // 保存设置
+                saveSettings();
+
+                showNotification('头像上传成功', 'success');
+            } else {
+                throw new Error('上传失败：' + (data.message || '未知错误'));
+            }
+        })
+        .catch(error => {
+            console.error('Error uploading avatar:', error);
+            showNotification('头像上传失败，请重试', 'error');
+
+            // 上传失败时，使用默认头像
+            const defaultAvatar = '/images/p1.png';
+            document.getElementById('avatarPreview').src = defaultAvatar;
+        });
     }
 }