wuzhen update

web/src/components/ImageUpload/index.vue

@@ -455,14 +455,38 @@ const handleBeforeUpload = (file: any) => {
     }
   }
 
+  // 设置超时处理 - 如果60秒后仍在loading状态，自动关闭并提示
+  const timeoutId = setTimeout(() => {
+    if (number.value > 0) {
+      console.warn('上传超时，自动关闭loading');
+      (proxy as any)?.$modal.closeLoading();
+      (proxy as any)?.$modal.msgError('上传超时，请检查网络连接或重试');
+      number.value = 0; // 重置计数器
+    }
+  }, 60000); // 60秒超时
+
   //压缩图片，开启压缩并且大于指定的压缩大小时才压缩
   if (props.compressSupport && file.size / 1024 > props.compressTargetSize) {
     (proxy as any)?.$modal.loading('正在上传图片，请稍候...');
     number.value++;
-    return compressAccurately(file, props.compressTargetSize);
+
+    // 压缩图片时的错误处理
+    try {
+      return compressAccurately(file, props.compressTargetSize);
+    } catch (compressionError) {
+      console.error('图片压缩失败:', compressionError);
+      clearTimeout(timeoutId);
+      (proxy as any)?.$modal.closeLoading();
+      (proxy as any)?.$modal.msgError('图片压缩失败，请重试');
+      number.value--;
+      return false;
+    }
   } else {
     (proxy as any)?.$modal.loading('正在上传图片，请稍候...');
     number.value++;
+
+    // 保存timeout ID以便在上传完成时清除
+    (file as any).uploadTimeoutId = timeoutId;
   }
 };
 
@@ -476,6 +500,11 @@ const handleUploadSuccess = (res: any, file: any) => {
   console.log('handleUploadSuccess:res', res);
   console.log('handleUploadSuccess:file', file);
 
+  // 清除上传超时处理
+  if ((file as any).uploadTimeoutId) {
+    clearTimeout((file as any).uploadTimeoutId);
+  }
+
   if (res.code === 200) {
     const uploadItem = {
       name: res.data.fileName,
@@ -488,7 +517,9 @@ const handleUploadSuccess = (res: any, file: any) => {
   } else {
     number.value--;
     (proxy as any)?.$modal.closeLoading();
-    (proxy as any)?.$modal.msgError(res.msg);
+    // 提供更详细的错误信息
+    const errorMsg = res.msg || '上传失败，请重试';
+    (proxy as any)?.$modal.msgError(errorMsg);
     imageUploadRef.value?.handleRemove(file);
     uploadedSuccessfully();
   }
@@ -657,9 +688,62 @@ const uploadedSuccessfully = async () => {
 };
 
 // 上传失败
-const handleUploadError = () => {
-  (proxy as any)?.$modal.msgError('上传图片失败');
+const handleUploadError = (error: any, file: any) => {
+  console.error('上传失败详细信息:', error);
+
+  // 清除上传超时处理
+  if (file && (file as any).uploadTimeoutId) {
+    clearTimeout((file as any).uploadTimeoutId);
+  }
+
+  // 确保关闭loading
   (proxy as any)?.$modal.closeLoading();
+
+  // 减少计数器
+  number.value--;
+
+  // 根据错误类型提供不同的错误信息
+  let errorMessage = '上传图片失败';
+
+  if (error.response) {
+    const status = error.response.status;
+    const responseData = error.response.data;
+
+    switch (status) {
+      case 403:
+        errorMessage = '没有文件上传权限，请联系管理员';
+        break;
+      case 413:
+        errorMessage = '文件太大，超过服务器限制';
+        break;
+      case 500:
+        errorMessage = '服务器内部错误，请稍后重试';
+        break;
+      case 504:
+        errorMessage = '上传超时，请检查网络连接';
+        break;
+      default:
+        if (responseData && responseData.msg) {
+          errorMessage = responseData.msg;
+        } else if (responseData && typeof responseData === 'string') {
+          errorMessage = `上传失败: ${responseData}`;
+        } else {
+          errorMessage = `上传失败，错误代码: ${status}`;
+        }
+    }
+  } else if (error.request) {
+    // 网络错误
+    if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
+      errorMessage = '上传超时，请检查网络连接或文件大小';
+    } else {
+      errorMessage = '网络连接错误，请检查网络设置';
+    }
+  } else if (error.message) {
+    errorMessage = `上传失败: ${error.message}`;
+  }
+
+  console.error('上传错误信息:', errorMessage);
+  (proxy as any)?.$modal.msgError(errorMessage);
 };
 
 // 预览