feat: 添加判断图片大小

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

@@ -159,6 +159,9 @@ const FormRuleVPictures = forwardRef((props, ref) => {
       >
         <UploadImage
           multiple={false}
+          maxWidth={customer.isCard ? 0 : 1200}
+          maxHeight={customer.isCard ? 0 : 1200}
+          superTips="公共滑动图尺寸不可大于 1200*1200"
           name="commonImageList"
           disabled={customer.isEdit && !customer.isCard}
           limit={imgConfig.commonImageList.limit}
@@ -232,6 +235,8 @@ const FormRuleVPictures = forwardRef((props, ref) => {
       >
         <UploadImage
           limit={imgConfig.detailImageList.limit}
+          maxWidth={customer.isCard ? 0 : 800}
+          superTips="详情图宽度不可大于800"
           name="detailImageList"
           disabled={customer.isEdit && !customer.isCard}
           pictures={detailImageList}

src/pages/ServiceGoods/components/UploadImage.jsx

@@ -72,26 +72,83 @@ const UploadImage = forwardRef((props, ref) => {
     const freshFiles = fileList?.filter(ele => ele.uid !== file.uid);
     bundleChange(freshFiles);
   };
-  const checkFile = file =>
-    new Promise(resolve => {
-      const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
-      const fileType = ['jpg', 'jpeg', 'png'];
-      if (!fileType.includes(curType)) {
-        notification.open({
-          message: file.name,
-          description: '图片格式须为jpg、jpeg、png！',
-        });
-        return resolve(null);
+
+  const cleanArray = (actual = []) =>
+    actual.reduce((prev, cur) => {
+      cur && prev.push(cur);
+      return prev;
+    }, []);
+
+  const warningTip = description => {
+    notification.warning({
+      message: '图片上传失败',
+      description,
+    });
+  };
+
+  const getBase64 = (img, callback) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+  };
+
+  const ImageInfo = file =>
+    new Promise((resolve, reject) => {
+      const LtMB = file.size / 1024 / 1024;
+      if (LtMB > 2) {
+        warningTip(`[${file.name}] 图片不可以大于2MB`);
+        resolve(null);
       }
-      if (file.size > MAX_FILE_SIZE * UNIT) {
-        notification.open({
-          message: file.name,
-          description: `单个图片大小不能超过${MAX_FILE_SIZE}M！`,
+      getBase64(file, url => {
+        const image = new Image();
+        image.addEventListener('load', () => {
+          const { width } = image;
+          const { height } = image;
+          file.width = width;
+          file.height = height;
+          file.LtMB = LtMB;
+          resolve(file);
+        });
+        image.addEventListener('error', () => {
+          warningTip(`${file.name}图片上传失败！`);
+          resolve(null);
         });
-        return resolve(null);
+        image.src = url;
+      });
+    });
+
+  const CheckImageInfoList = async files => {
+    const promiseImage = files.map(file => ImageInfo(file));
+    const clearImage = await Promise.all(promiseImage);
+    return cleanArray(clearImage);
+  };
+
+  const isUploadNext = async imgFileList => {
+    const filterImage = imgFileList.filter(img => {
+      if (
+        (imgOptions.maxWidth && img.width > imgOptions.maxWidth) ||
+        (imgOptions.maxHeight && img.height > imgOptions.maxHeight)
+      ) {
+        warningTip(`[${img.name}] ${imgOptions.superTips}`);
+        return false;
       }
-      return resolve(file);
+      return true;
     });
+    return filterImage;
+  };
+
+  const checkFile = files => {
+    const fileType = ['jpg', 'jpeg', 'png'];
+    const filterImage = files.filter(file => {
+      const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
+      if (!fileType.includes(curType)) {
+        warningTip('图片格式须为jpg、jpeg、png！');
+        return false;
+      }
+      return true;
+    });
+    return filterImage;
+  };
 
   const imageLoading = (file, ret) =>
     new Promise(resolve => {
@@ -119,12 +176,14 @@ const UploadImage = forwardRef((props, ref) => {
           });
           return Upload.LIST_IGNORE;
         }
-        const fileAll = fileArray.map(item => checkFile(item));
-        const checkFiles = (await Promise.all(fileAll)).filter(item => item !== null);
+        const flies = checkFile(fileArray);
+        const optionsArray = await CheckImageInfoList(flies);
+        const checkFiles = await isUploadNext(optionsArray);
         try {
           if (checkFiles.length) {
             setUploadLoading(true);
             const res = await merchantUpload(checkFiles);
+            console.log('res :>> ', res);
             if (res.data) {
               const proFiles = (res.data || []).map((urlItem, urlIndex) =>
                 imageLoading(checkFiles[urlIndex], urlItem),