页面内容管理：上传图片尺寸效验

src/components/UploadFile/src/UploadImg.vue

@@ -79,7 +79,10 @@ const props = defineProps({
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
   borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
   showDelete: propTypes.bool.def(true), // 是否显示删除按钮
-  showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
+  showBtnText: propTypes.bool.def(true), // 是否显示按钮文字
+  validSpecifications: propTypes.bool.def(false), // 是否开启图片规格校验
+  maxWidth: propTypes.number.def(0), // 图片最大宽度
+  maxHeight: propTypes.number.def(0), // 图片最大高度
 })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -112,7 +115,29 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
   if (!imgType.includes(rawFile.type as FileTypes))
     message.notifyWarning('上传图片不符合所需的格式！')
   if (!imgSize) message.notifyWarning(`上传图片大小不能超过 ${props.fileSize}M！`)
-  return imgType.includes(rawFile.type as FileTypes) && imgSize
+  // return imgType.includes(rawFile.type as FileTypes) && imgSize
+
+  if (props.validSpecifications) {
+    // 图片尺寸效验
+    return imgType.includes(rawFile.type as FileTypes) && imgSize && new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(rawFile);
+      reader.onload = (e) => {
+        const img = new Image()
+        img.src = e.target.result
+        img.onload = () => {
+          const width = img.width
+          const height = img.height
+          if (width > props.maxWidth || height > props.maxHeight) {
+            message.notifyWarning(`图片尺寸过大，请上传宽度不超过 ${props.maxWidth}px，高度不超过 ${props.maxHeight}px 的图片`)
+            reject(false)
+          } else {
+            resolve(rawFile)
+          }
+        }
+      }
+    })
+  } else return imgType.includes(rawFile.type as FileTypes) && imgSize
 }
 
 // 图片上传成功提示
@@ -126,6 +151,7 @@ const uploadError = () => {
   message.notifyError('图片上传失败，请您重新上传！')
 }
 </script>
+
 <style lang="scss" scoped>
 .is-error {
   .upload {

src/views/menduner/system/web/WebContentForm.vue

@@ -11,7 +11,7 @@
         <el-input v-model="formData.imgSize" disabled />
       </el-form-item>
       <el-form-item label="图片" prop="url" required>
-        <UploadImg v-model="formData.url" height="150px" width="300px" />
+        <UploadImg v-model="formData.url" :validSpecifications="true" height="150px" width="300px" :maxWidth="maxWidth" :maxHeight="maxHeight" />
         <span style="display: flex; color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请严格按照图片规格上传</span>
       </el-form-item>
       <el-form-item label="点击图片跳转链接" prop="link">
@@ -47,13 +47,16 @@ const formData = ref({
   // sort: 0,
   url: ''
 })
+const maxWidth = ref(0)
+const maxHeight = ref(0)
+
 const imgSizeList = {
-  'pcLeft': '宽528px*高919px',
-  'pcAdvertisement': '宽900px*高530px',
-  'pcHomeCarousel': '宽792px*高392px',
-  'pcLoginCarousel': '宽792px*高392px',
-  'appHomeCarousel': '宽750px*高350px',
-  'appAdvertisement': '宽331px*高442px'
+  'pcLeft': [528, 919],
+  'pcAdvertisement': [900, 530],
+  'pcHomeCarousel': [792, 392],
+  'pcLoginCarousel': [792, 392],
+  'appHomeCarousel': [750, 350],
+  'appAdvertisement': [331, 442]
 }
 const editId = ref('')
 const formType = ref('')
@@ -89,6 +92,11 @@ const open = async (type: string, key: string, title: string, mark?: string) =>
   dialogVisible.value = true
   dialogTitle.value = title + (type === 'add' ? '新增' : '编辑')
   formLoading.value = true
+
+  formData.value.imgSize = `宽${imgSizeList[key][0]}px*高${imgSizeList[key][1]}px`
+  maxWidth.value = imgSizeList[key][0]
+  maxHeight.value = imgSizeList[key][1]
+
   try {
     query.value = await WebContentApi.getWebContent(1)
     // 编辑
@@ -100,7 +108,6 @@ const open = async (type: string, key: string, title: string, mark?: string) =>
   } finally {
     formLoading.value = false
   }
-  formData.value.imgSize = imgSizeList[key]
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗