feat(upload): v5.2终极方案-服务器端处理文件转换

frontend/index.html

@@ -1180,7 +1180,7 @@
     </div>
 
     <!-- Scripts -->
-    <script src="/static/js/main.js?v=5.1"></script>
+    <script src="/static/js/main.js?v=5.2"></script>
     <script src="/static/js/trial-periods.js?v=1.3"></script>
     <script src="/static/js/trial-periods-page.js?v=1.6"></script>
 </body>

frontend/js/main.js

@@ -61,7 +61,7 @@ function canDelete() {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-  console.log("CRM System Main JS v5.1 Loaded - " + new Date().toLocaleString());
+  console.log("CRM System Main JS v5.2 Loaded - " + new Date().toLocaleString());
   // 登录守卫
   const token = localStorage.getItem("crmToken");
   if (!token && !window.location.pathname.endsWith("login.html")) {
@@ -3235,59 +3235,53 @@ document.addEventListener("DOMContentLoaded", function () {
 
       const newBase64Images = [];
 
-      // Canvas-based conversion - most compatible method for restricted environments
+      // Direct server upload - bypassing all client-side file reading
-      const fileToBase64Canvas = (file) => {
+      const formData = new FormData();
-        return new Promise((resolve, reject) => {
+      let validFileCount = 0;
-          // Create object URL from file
-          const url = URL.createObjectURL(file);
-          const img = new Image();
-
-          img.onload = () => {
-            try {
-              // Create canvas and draw image
-              const canvas = document.createElement('canvas');
-              canvas.width = img.width;
-              canvas.height = img.height;
-
-              const ctx = canvas.getContext('2d');
-              ctx.drawImage(img, 0, 0);
-
-              // Convert to base64
-              const base64 = canvas.toDataURL(file.type || 'image/png');
-
-              // Clean up
-              URL.revokeObjectURL(url);
-              resolve(base64);
-            } catch (error) {
-              URL.revokeObjectURL(url);
-              reject(error);
-            }
-          };
-
-          img.onerror = () => {
-            URL.revokeObjectURL(url);
-            reject(new Error('Failed to load image'));
-          };
-
-          img.src = url;
-        });
-      };
 
       for (const file of files) {
         if (!file.type.startsWith("image/")) {
           console.warn(`File is not an image: ${file.name}`);
           continue;
         }
+        formData.append("screenshots", file);
+        validFileCount++;
+      }
+
+      if (validFileCount === 0) {
+        alert("请选择有效的图片文件");
+        return;
+      }
 
       try {
-          console.log(`[v5.1-Canvas] Converting ${file.name} (${file.size} bytes)...`);
+        console.log(`[v5.2-ServerUpload] Uploading ${validFileCount} file(s) to server...`);
-          const base64 = await fileToBase64Canvas(file);
+
-          newBase64Images.push(base64);
+        // Use native fetch with manual Authorization header
-          console.log(`✅ Successfully converted ${file.name} using Canvas method`);
+        const token = localStorage.getItem("crmToken");
-        } catch (error) {
+        const response = await fetch("/api/upload", {
-          console.error(`❌ Canvas method failed for ${file.name}:`, error);
+          method: "POST",
-          alert(`无法处理文件 "${file.name}"。\n\n可能的原因：\n1. 图片格式不受支持\n2. 图片文件损坏\n3. 浏览器内存不足\n\n建议：\n• 尝试使用较小的图片\n• 转换为标准格式（JPG/PNG）\n• 刷新页面后重试`);
+          headers: {
+            "Authorization": `Bearer ${token}`
+          },
+          body: formData
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          const uploadedImages = result.filePaths || [];
+          console.log(`✅ Server successfully processed ${uploadedImages.length} image(s)`);
+
+          newBase64Images.push(...uploadedImages);
+        } else {
+          const errorText = await response.text();
+          console.error("❌ Server upload failed:", errorText);
+          alert(`图片上传失败（状态码: ${response.status}）\n\n可能的原因：\n1. 图片文件过大（超过32MB）\n2. 服务器存储空间不足\n3. 网络连接不稳定\n\n建议：压缩图片后重试`);
+          return;
         }
+      } catch (error) {
+        console.error("❌ Upload request failed:", error);
+        alert(`上传请求失败: ${error.message}\n\n请检查：\n1. 服务器是否正常运行\n2. 网络连接是否正常\n3. 是否已登录`);
+        return;
       }
 
       if (newBase64Images.length > 0) {