fix: 公司主页和车间小地图上传图片的时候进行大小限制

src/views/map-config/mini-map/MiniMapConfig.vue

@@ -12,6 +12,7 @@
           class="avatar-uploader"
           :action="actionUrl"
           :show-file-list="false"
+          :before-upload="handleBeforeUpload"
           :on-success="handleAvatarSuccess"
           :with-credentials="true"
           name="file"
@@ -126,7 +127,7 @@
   const isUploadBg = ref<boolean>(true);
 
   const isMap = ref(false);
-  const { urlPrefix } = useGlobSetting();
+  const { urlPrefix, minifyImgUrl } = useGlobSetting();
 
   const actionUrl = computed(() => {
     return urlJoin(urlPrefix!, `/admin/minimap/uploadPicture`);
@@ -159,12 +160,31 @@
     hasBg.value = false;
   };
 
-  const handleBeforeUpload = () => {
+  const handleBeforeUpload = (rawFile) => {
     if (!selectedShopId.value) {
       ElMessage.error({
         message: '请先选择车间',
       });
-      return false;
+      return Promise.reject();
+    }
+    if (rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
+      ElMessage.error('请上传jpg、jpeg、png格式的图片!');
+      return Promise.reject();
+    }
+    const mSize = 1024 * 1024;
+    if (rawFile.size > 2 * mSize) {
+      const realSize = (rawFile.size / mSize).toFixed(2);
+      ElMessageBox.alert(`<div>当前图片${realSize}M，建议压缩到2M以内。 <div>`, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: minifyImgUrl ? '点我去压缩' : '确定',
+        type: 'warning',
+      }).then(() => {
+        if (minifyImgUrl) {
+          window.open(minifyImgUrl);
+        }
+      });
+
+      return Promise.reject();
     }
   };
 

src/views/page-config/ConfigEdit.vue

@@ -125,7 +125,7 @@
 
   const pageConfig = usePageConfig();
   const { label, layoutId } = pageConfig;
-  const { urlPrefix } = useGlobSetting();
+  const { urlPrefix, minifyImgUrl } = useGlobSetting();
   const drawContainer = ref<HTMLDivElement>();
   const mapContainerRef = ref();
 
@@ -154,7 +154,22 @@
   const handleBeforeUpload = (rawFile) => {
     if (rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
       ElMessage.error('请上传jpg、jpeg、png格式的图片!');
-      return false;
+      return Promise.reject();
+    }
+    const mSize = 1024 * 1024;
+    if (rawFile.size > 2 * mSize) {
+      const realSize = (rawFile.size / mSize).toFixed(2);
+      ElMessageBox.alert(`<div>当前图片${realSize}M，建议压缩到2M以内。 <div>`, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: minifyImgUrl ? '点我去压缩' : '确定',
+        type: 'warning',
+      }).then(() => {
+        if (minifyImgUrl) {
+          window.open(minifyImgUrl);
+        }
+      });
+
+      return Promise.reject();
     }
   };
 

types/config.d.ts

@@ -118,4 +118,6 @@ export interface GlobConfig {
   imgUrl: string | undefined;
 
   tenantCode: string;
+
+  minifyImgUrl?: string;
 }

utils/devProxy/local/app.config.js

@@ -14,8 +14,9 @@ window.__PRODUCTION__SKYEYEADMIN__CONF__ = {
   /** 问题闭环处理，简单处理 */
   "VITE_GLOB_QUESTION_LIST_VERSION": 'v2',
   // 消息管理可选择的推送渠道
-  "VITE_GLOB_NOTICE_CHANNEL": ['lanxin', 'platform', 'wecom',]
-
+  "VITE_GLOB_NOTICE_CHANNEL": ['lanxin', 'platform', 'wecom'],
+  // 压缩图片的服务地址
+  "minifyImgUrl": 'http://192.168.13.68:3000',
 };