新建小圈等比例上传图片

src/components/yqrange/baseinfo.vue

 <template>
-  <el-form ref="formData" :model="formData" :rules="rules" label-width="150px" label-suffix="：" class="basic-form">
+  <el-form
+    ref="formData"
+    :model="formData"
+    :rules="rules"
+    label-width="150px"
+    label-suffix="："
+    class="basic-form"
+  >
     <el-form-item label="圈子名称" prop="name">
       <el-col :span="13">
-        <el-input size="small" v-model="formData.name" placeholder="请输入圈子名称" style="width:70%;"
-          @change="returnTypeData('name')"></el-input>
+        <el-input
+          size="small"
+          v-model="formData.name"
+          placeholder="请输入圈子名称"
+          style="width:70%;"
+          @change="returnTypeData('name')"
+        ></el-input>
         <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/14</span>
       </el-col>
     </el-form-item>
     <div class="basic-item-icon">
       <el-form-item label="圈子头像" class="required-label">
-        <el-upload v-model="formData.headUrl" class="bg-uploader" action="#" :show-file-list="false"
-          :before-upload="beforeUploadPic1">
-          <img v-if="formData.headUrl" :src="formData.headUrl" @mouseover.stop="imgMouseOver1=true" class="bg-img" />
+        <el-upload
+          v-model="formData.headUrl"
+          class="bg-uploader"
+          action="#"
+          :show-file-list="false"
+          :before-upload="beforeUploadPic1"
+        >
+          <img
+            v-if="formData.headUrl"
+            :src="formData.headUrl"
+            @mouseover.stop="imgMouseOver1=true"
+            class="bg-img"
+          />
           <img v-if="!formData.headUrl" class="bg-img" src="../../assets/image/small.png" />
-          <div class="img-delete" v-show="imgMouseOver1" @click.stop="deleteImg(1)"
-            @mouseout.stop="imgMouseOver1=false">
+          <div
+            class="img-delete"
+            v-show="imgMouseOver1"
+            @click.stop="deleteImg(1)"
+            @mouseout.stop="imgMouseOver1=false"
+          >
             <i class="el-icon-delete"></i>
           </div>
           <div class="limit-text">
@@ -28,16 +54,30 @@
     </div>
     <el-form-item label="圈子介绍" prop="introduce">
       <el-col :span="13">
-        <el-input size="small" v-model="formData.introduce" placeholder="请输入圈子介绍" @change="returnTypeData('introduce')"
-          style="width:70%;"></el-input>
+        <el-input
+          size="small"
+          v-model="formData.introduce"
+          placeholder="请输入圈子介绍"
+          @change="returnTypeData('introduce')"
+          style="width:70%;"
+        ></el-input>
         <span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/40</span>
       </el-col>
     </el-form-item>
     <el-form-item label="内容发布权限" prop="dynamicFlag">
-      <el-select v-model="formData.dynamicFlag" @change="returnTypeData('dynamicFlag')" placeholder="请选择发布权限"
-        size="small" clearable>
-        <el-option v-for="(item,index) in contentList" :key="index" :label="item.label" :value="item.value">
-        </el-option>
+      <el-select
+        v-model="formData.dynamicFlag"
+        @change="returnTypeData('dynamicFlag')"
+        placeholder="请选择发布权限"
+        size="small"
+        clearable
+      >
+        <el-option
+          v-for="(item,index) in contentList"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
       </el-select>
     </el-form-item>
   </el-form>
@@ -163,7 +203,7 @@
         }
         if (!isLt2M) {
           vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
-          // return;
+          return;
         }
         let _img = new FileReader();
         _img.readAsDataURL(file);
@@ -173,9 +213,9 @@
           image.onload = function () {
             let _this = this;
             // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
-            //   // if (false) {
-            //   vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
-            // } else {
+            if (_this.width != _this.height) {
+              vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
+            } else {
               openLoading(vm);
               doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
                 closeLoading(vm);
@@ -193,7 +233,7 @@
                 };
                 vm.$message.success("上传成功");
               });
-            // }
+            }
           };
         };
         return isJPG && isLt2M;
@@ -210,90 +250,90 @@
 </script>
 
 <style lang="less">
-  .first-step {
-    margin-top: 20px;
-
-    .p-title {
-      padding-left: 10px;
-      margin-bottom: 15px;
-    }
-
-    .basic-item-icon {
-      position: relative;
+.first-step {
+  margin-top: 20px;
 
-      .require {
-        position: absolute;
-        left: 67px;
-        top: 11px;
-        color: #f56c6c;
-      }
-
-      .upload-message {
-        position: absolute;
-        left: 160px;
-        top: 105px;
-        font-size: 12px;
-        color: #f56c6c;
-      }
+  .p-title {
+    padding-left: 10px;
+    margin-bottom: 15px;
+  }
 
-      .img-delete {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 84px;
-        height: 100px;
-        background: #000;
-        opacity: 0.7;
-        z-index: 999;
+  .basic-item-icon {
+    position: relative;
 
-        i {
-          color: #fff;
-          margin-top: 39px;
-          margin-left: 0px;
-        }
-      }
+    .require {
+      position: absolute;
+      left: 67px;
+      top: 11px;
+      color: #f56c6c;
     }
 
-    .word-num {
+    .upload-message {
+      position: absolute;
+      left: 160px;
+      top: 105px;
       font-size: 12px;
-      color: #999;
-      padding-top: 5px;
+      color: #f56c6c;
     }
 
-    .line {
-      margin-left: 10px;
-      width: 20px;
-    }
+    .img-delete {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      width: 84px;
+      height: 100px;
+      background: #000;
+      opacity: 0.7;
+      z-index: 999;
 
-    .bg-uploader {
-      .bg-img {
-        float: left;
-        width: 84px;
-        height: 100px;
+      i {
+        color: #fff;
+        margin-top: 39px;
+        margin-left: 0px;
       }
+    }
+  }
 
-      .limit-text {
-        float: left;
-        margin-left: 10px;
-        margin-top: -10px;
+  .word-num {
+    font-size: 12px;
+    color: #999;
+    padding-top: 5px;
+  }
 
-        p {
-          font-size: 12px;
-          color: #999;
-        }
-      }
+  .line {
+    margin-left: 10px;
+    width: 20px;
+  }
+
+  .bg-uploader {
+    .bg-img {
+      float: left;
+      width: 84px;
+      height: 100px;
     }
 
-    .el-upload__tip {
-      position: absolute;
-      top: -6px;
-      left: 130px;
+    .limit-text {
+      float: left;
+      margin-left: 10px;
+      margin-top: -10px;
+
+      p {
+        font-size: 12px;
+        color: #999;
+      }
     }
   }
 
-  .required-label .el-form-item__label::before {
-    content: '*';
-    color: #F56C6C;
-    margin-right: 4px;
+  .el-upload__tip {
+    position: absolute;
+    top: -6px;
+    left: 130px;
   }
+}
+
+.required-label .el-form-item__label::before {
+  content: "*";
+  color: #f56c6c;
+  margin-right: 4px;
+}
 </style>
\ No newline at end of file