新建小圈等比例上传图片

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,7 +250,7 @@
 </script>
 
 <style lang="less">
-  .first-step {
+.first-step {
   margin-top: 20px;
 
   .p-title {
@@ -289,11 +329,11 @@
     top: -6px;
     left: 130px;
   }
-  }
+}
 
-  .required-label .el-form-item__label::before {
-    content: '*';
-    color: #F56C6C;
+.required-label .el-form-item__label::before {
+  content: "*";
+  color: #f56c6c;
   margin-right: 4px;
-  }
+}
 </style>
\ No newline at end of file