zc

src/views/comprehensive/system/publicConfig/basicsConfig.vue

@@ -19,14 +19,15 @@
             accept="image/jpeg,image/gif,image/png"
             :on-success="(res)=>handleAvatarSuccess(res,'circularLogo')"
             :headers="headers"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.circularLogo" :src="form.circularLogo" class="avatar" style="height:80px;width:80px;border-radius: 40px;">
+            :before-upload="(file)=>beforeAvatarUpload(file,'1')">
+            <img v-if="form.circularLogo" :src="form.circularLogo" class="avatar" style="height:200px;width:200px;background: #dedede;padding:5px;border-radius:4px;">
             <i v-if="!form.circularLogo" class="el-icon-plus avatar-uploader-icon" style="height:80px;width:80px;border-radius: 40px;line-height: 80px;">上传</i>
           </el-upload>
           <i v-if="form.circularLogo" class="el-icon-view" @click="lookImg(form.circularLogo)"
              style="position: absolute;top:0;right:0;z-index:999;border-radius:3px;cursor:pointer;width:20px;
             height:20px;line-height:20px;text-align: center;background: rgba(0,0,0,0.2);color:#fff;"></i>
         </el-form-item>
+        <p style="margin-left:160px;font-size:16px;color:#666;font-weight:500;">尺寸限制为200*200px，支持PNG格式</p>
       </div>
       <div class="form-max-box">
         <el-form-item label="长方形Logo：" prop="rectangleLogo">
@@ -37,14 +38,15 @@
             accept="image/jpeg,image/gif,image/png"
             :on-success="(res)=>handleAvatarSuccess(res,'rectangleLogo')"
             :headers="headers"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.rectangleLogo" :src="form.rectangleLogo" class="avatar">
+            :before-upload="(file)=>beforeAvatarUpload(file,'2')">
+            <img v-if="form.rectangleLogo" :src="form.rectangleLogo" class="avatar" style="height:110px;width:500px;background: #dedede;padding:5px;border-radius:4px;">
             <i v-if="!form.rectangleLogo" class="el-icon-plus avatar-uploader-icon">上传</i>
           </el-upload>
           <i v-if="form.rectangleLogo" class="el-icon-view" @click="lookImg(form.rectangleLogo)"
              style="position: absolute;top:0;right:0;z-index:999;border-radius:3px;cursor:pointer;width:20px;
             height:20px;line-height:20px;text-align: center;background: rgba(0,0,0,0.2);color:#fff;"></i>
         </el-form-item>
+        <p style="margin-left:160px;font-size:16px;color:#666;font-weight:500;">尺寸限制为110*500px，支持PNG格式</p>
       </div>
     </el-form>
     <div class="sub_btn">
@@ -139,16 +141,50 @@
         }
         this.$forceUpdate()
       },
-      beforeAvatarUpload(file) {
-        let type = false;
-        console.log('file',file);
-        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
-          type = true;
+      beforeAvatarUpload(file,type) {
+        if (file.type == 'image/png') {
+          this.asyncImgChecked(file,type).then(data => {
+            if (data.code == 200) {
+              return true;
+            } else if(data.code == 201){
+              this.$message.error('尺寸限制为200*200px，支持PNG格式')
+              return false;
+            } else if(data.code == 202){
+              this.$message.error('尺寸限制为110*500px，支持PNG格式')
+              return false;
+            }
+          })
         }else{
-          this.$message.error('只能上传png/jpeg/gif格式图片');
-          type = false;
+          this.$message.error('请上传PNG格式');
+          return false;
         }
-        return type;
+      },
+      // 计算图片尺寸
+      asyncImgChecked (file,type) {
+        return new Promise((resolve) => {
+          let reader = new FileReader()
+          reader.readAsDataURL(file) // 必须用file.raw
+          reader.onload = e => { // 让页面中的img标签的src指向读取的路径
+            let img = e.target.result;
+            const image = new Image()
+            image.src=img
+            image.onload = _=>{
+              if(type == '1'){
+                if(image.width == 200 && image.height == 200){
+                  resolve({code:200})
+                }else{
+                  resolve({code:201})
+                }
+              }else if(type == '2'){
+                if(image.width == 500 && image.height == 110){
+                  resolve({code:200})
+                }else{
+                  resolve({code:202})
+                }
+              }
+            }
+          }
+        })
       },
     },
   };

src/views/comprehensive/system/publicConfig/indexOne.vue

@@ -20,7 +20,7 @@
             accept="image/jpeg,image/gif,image/png"
             :on-success="(res)=>handleAvatarSuccess(res,'circularLogo')"
             :headers="headers"
-            :before-upload="beforeAvatarUpload">
+            :before-upload="(file)=>beforeAvatarUpload(file,'1')">
             <img v-if="form.circularLogo" :src="form.circularLogo" class="avatar" style="height:80px;width:80px;">
             <i v-if="!form.circularLogo" class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
@@ -36,7 +36,7 @@
             accept="image/jpeg,image/gif,image/png"
             :on-success="(res)=>handleAvatarSuccess(res,'rectangleLogo')"
             :headers="headers"
-            :before-upload="beforeAvatarUpload">
+            :before-upload="(file)=>beforeAvatarUpload(file,'2')">
             <img v-if="form.rectangleLogo" :src="form.rectangleLogo" class="avatar" style="height:80px;width:80px;">
             <i v-if="!form.rectangleLogo" class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
@@ -372,16 +372,50 @@
         }
         this.$forceUpdate()
       },
-      beforeAvatarUpload(file) {
-        let type = false;
-        console.log('file',file);
-        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
-          type = true;
+      beforeAvatarUpload(file,type) {
+        if (file.type == 'image/png') {
+          this.asyncImgChecked(file,type).then(data => {
+            if (data.code == 200) {
+              return true;
+            } else if(data.code == 201){
+              this.$message.error('尺寸限制为200*200px，支持PNG格式')
+              return false;
+            } else if(data.code == 202){
+              this.$message.error('尺寸限制为110*500px，支持PNG格式')
+              return false;
+            }
+          })
         }else{
-          this.$message.error('只能上传png/jpeg/gif格式图片');
-          type = false;
+          this.$message.error('请上传PNG格式');
+          return false;
         }
-        return type;
+      },
+      // 计算图片尺寸
+      asyncImgChecked (file,type) {
+        return new Promise((resolve) => {
+          let reader = new FileReader()
+          reader.readAsDataURL(file) // 必须用file.raw
+          reader.onload = e => { // 让页面中的img标签的src指向读取的路径
+            let img = e.target.result;
+            const image = new Image()
+            image.src=img
+            image.onload = _=>{
+              if(type == '1'){
+                if(image.width == 200 && image.height == 200){
+                  resolve({code:200})
+                }else{
+                  resolve({code:201})
+                }
+              }else if(type == '2'){
+                if(image.width == 500 && image.height == 110){
+                  resolve({code:200})
+                }else{
+                  resolve({code:202})
+                }
+              }
+            }
+          }
+        })
       },
     },
   };

src/views/login.vue

@@ -328,7 +328,7 @@ export default {
       position: absolute;
       top:29px;
       left:52px;
-      width:220px;
+      width:250px;
       height:55px;
     }
     .title-img-box{

src/views/loginOne.vue

@@ -481,7 +481,7 @@
       position: absolute;
       top:29px;
       left:52px;
-      width:220px;
+      width:250px;
       height:55px;
     }
     .title-img-box{