上传图片大小，和证件照切图

src/views/signup/SignUpBaseInfo.vue

@@ -42,7 +42,7 @@
         <div class="title">证件照上传</div>
 
         <div class="upload-img">
-            <van-uploader v-model="certificatePhoto" :before-read="beforeRead"
+            <!-- <van-uploader v-model="certificatePhoto" :before-read="beforeRead"
                                 :before-delete="beforeDelete"
                                 :after-read="afterRead"
                                 accept="image/*"
@@ -51,7 +51,31 @@
                     <i class="icon-upload-add"></i>
                     <p>点击上传</p>
                 </div>
-            </van-uploader>
+            </van-uploader> -->
+            <div class="cropper2">
+                <van-image
+                    width="100%"
+                    height="100%"
+                    :src="form.certificatePhoto"
+                >
+                    <template #loading>
+                        <div class="upload-container">
+                            <i class="icon-upload-add"></i>
+                            <p>点击上传</p>
+                        </div>
+                    </template>
+                    <template #error>
+                        <div class="upload-container">
+                            <i class="icon-upload-add"></i>
+                            <p>点击上传</p>
+                        </div>
+                    </template>
+                </van-image>
+                <h5-cropper
+                    @getFile="getFilePhoto"
+                    :option="option2"
+                ></h5-cropper>
+            </div>
             <p class="upload-tips">须使用免冠证件照，纯底色<br/>（纯白、纯蓝或纯红）<br/>（图像预览可能会异常）</p>
         </div>
 
@@ -100,6 +124,24 @@ export default {
                 high: true,
                 ceilbutton: true
             }, //配置
+            option2: {
+                canScale: true,
+                fixedNumber: [5, 7],
+                img: '',
+                size: 1,
+                info: true,
+                full: false,
+                canMove: true,
+                fixedBox: false,
+                original: false,
+                canMoveBox: true,
+                autoCrop: true,
+                centerBox: false,
+                high: true,
+                ceilbutton: true
+            }, //配置
+            photoUrl: null
+            // "https://img.yzcdn.cn/vant/cat.jpeg"
         }
     },
     mounted() {
@@ -132,6 +174,25 @@ export default {
                 return false
             }
         },
+        async getFilePhoto(file) {
+            setLoading(true)
+            try {
+                let formData = new FormData()
+                formData.append('file', file)
+                formData.append('idCardSide', "front")
+                let res = await uploadFile(formData)
+                let result = res.data
+                setLoading(false)
+                if(result.code == 200) {
+                    this.form.certificatePhoto = result.data.url
+                } else {
+                    this.$toast(result.msg)
+                    return false
+                }
+            } catch (err) {
+                return false
+            }
+        },
         async __init() {
             setLoading(true)
             try {
@@ -346,6 +407,34 @@ export default {
         height: 24px;
     }
 }
+.cropper2 {
+    /* 切记position: relative一定要有 */
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    height: 1.4rem;
+    /deep/.van-image {
+        position: absolute;
+        left: 0;
+        top: 0;
+        color: var(--main-color);
+    }
+    /deep/.van-image__img {
+        width: 1rem;
+        height: 1.4rem;
+        margin: 0 auto;
+    }
+    .upbtn {
+        height: 1.4rem;
+        width: 1rem;
+        margin: auto;
+    }
+    /deep/.van-image__error, /deep/.van-image__loading {
+        width: 1rem;
+        left: 50%;
+        margin-left: -.5rem;
+    }
+}
 .img {
     position: absolute;
     width: 100%;

src/views/signup/SignUpLevel.vue

@@ -640,10 +640,10 @@ export default {
             this.sheetSong.status = false
         },
         beforeRead(file) {
-            const isLt2M = file.size / 1024 / 1024 < 2
+            const isLt2M = file.size / 1024 / 1024 < 5
 
             if (!isLt2M) {
-                this.$toast('上传图片大小不能超过 2MB')
+                this.$toast('上传图片大小不能超过 5MB')
                 return false
             }
             return true