企业认证-增加2M限制

assets/css/otherpage/companyVerifyInput.scss

@@ -88,6 +88,16 @@
         }
       }
 
+      .uploadArea {
+        display: flex;
+        align-items: center;
+
+        .tipps {
+          margin-left: 10px;
+          color: #FF5B3B
+        }
+      }
+
       .avatar-uploader {
         margin-top: 9px;
         width: 184px;
@@ -253,6 +263,16 @@
       }
     }
 
+    .uploadArea {
+      display: flex;
+      align-items: center;
+
+      .tipps {
+        margin-left: pxtovw(10);
+        color: #FF5B3B
+      }
+    }
+
     .uploadFile {
       margin-top: pxtovw(29);
 

pages/otherpage/companyVerifyInput/index.vue

@@ -21,22 +21,27 @@
         </div>
         <div class="uploadFile">
           <p class="name">请上传 <span>加盖公章</span> 的营业执照</p>
-          <el-upload
-            v-loading="uploading"
-            class="avatar-uploader"
-            action="#"
-            :show-file-list="false"
-            :multiple="false"
-            accept="image/png, image/jpeg"
-            :before-upload="handleFileChange"
-          >
-            <i v-if="imageUrl" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
-            <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
-            <div v-else class="noneImage">
-              <i class="el-icon-plus avatar-uploader-icon"></i>
-              <span class="title">上传照片</span>
-            </div>
-          </el-upload>
+          <div class="uploadArea">
+            <el-upload
+              v-loading="uploading"
+              class="avatar-uploader"
+              action="#"
+              :show-file-list="false"
+              :multiple="false"
+              accept="image/png, image/jpeg"
+              :before-upload="handleFileChange"
+            >
+              <i v-if="imageUrl" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
+              <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
+              <div v-else class="noneImage">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+                <span class="title">上传照片</span>
+              </div>
+            </el-upload>
+            <p class="tipps">
+             (图片大小最大2M)
+            </p>
+          </div>
         </div>
       </div>
       <div class="submitButton">
@@ -202,6 +207,11 @@
       },
 
       handleFileChange(file) {
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          this.$message.error('上传图片大小不能超过 2MB!');
+          return
+        }
         const formData = new FormData();
         formData.append("file", file);
         formData.append("original_filename", file.name);
@@ -213,6 +223,8 @@
           .then(res => {
             console.log(res)
             this.imageUrl = res.filename
+          }).catch((e)=>{
+            this.$message.error("上传失败:" + e.message)
           })
           .finally(() => {
             this.uploading = false;
@@ -233,7 +245,6 @@
             return
           }
         }, 3000)
-
       }
     },