增加图片尺寸校验

src/views/super/clientSet/coverInfoPage.vue

@@ -39,7 +39,8 @@
             <div class="flex mt12">
                 <img v-if="coverStyle" :src="coverStyle.qrcode_path" class="kefuImg mr-12">
                 <div class="qqCode-wrap">
-                    <el-upload class="avatar-uploader mt12" accept=".jpg" :on-change="handleQQkfChange" action="#"
+                    <el-upload class="avatar-uploader mt12" accept=".jpg,.png" :on-change="handleQQkfChange" action="#"
+                    :before-upload="beforeAvatarUpload"
                         :multiple="false" :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
                         <GuipButton class="upload-button" type="ignore" :btnstyle="{ width: '118px' }">
                             <div class="bgImg"></div>
@@ -224,9 +225,31 @@ export default {
 
         handleQQkfChange(file, fileList) {
             console.log(file, fileList)
+            if (file.raw) {
+                const isLt2M = file.raw.size / 1024 / 1024 < 2;
+                if (!isLt2M) {
+                    this.$Message.error('上传图片大小不能超过 2MB!');
+                    this.$refs.avatorUpload.clearFiles();
+                    return;
+                }
+            }
             let fileObj = file.raw
             this.formData.set('file', fileObj)
         },
+          // 文件校验
+        beforeAvatarUpload(file) {
+            const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            
+            if (!isImage) {
+                this.$Message.error('上传文件只能是 JPG、PNG 格式!');
+            }
+            if (!isLt2M) {
+                this.$Message.error('上传文件大小不能超过 2MB!');
+            }
+            
+            return isImage && isLt2M;
+        },
         // 提交封面样式信息
         uploadCoverTpl() {
             this.formData.set('template_id',this.template_id)