上传图片修改为4M

dist/css/SignUp.06a21ada.css

@@ -0,0 +1 @@
+.SignUp[data-v-b43692fa]{max-width:700px;position:relative;overflow-y:auto;overflow-x:hidden;background-color:#fff;margin:0 auto}.container[data-v-b43692fa]{min-height:100vh;background:url(../img/signUpBg.8e6b6a64.png) no-repeat top #f3f4f8;background-size:contain;overflow:hidden}.container h2[data-v-b43692fa]{position:absolute;padding-top:.4rem;color:#fff;font-size:.26rem;font-weight:700;width:2.1rem;text-align:left;margin-left:.16rem}.container .section[data-v-b43692fa]{background:#fff;margin:2rem .16rem .15rem;border-radius:.1rem;padding:.22rem}.container .section .title[data-v-b43692fa]{margin-top:.28rem;font-size:.18rem;color:#1a1a1a}.container .section .content[data-v-b43692fa]{padding-top:.05rem;color:grey;font-size:.16rem;word-break:break-all}.container .protocol[data-v-b43692fa]{font-size:.14rem;margin-bottom:.3rem;text-align:center;display:block;color:#0091ff}.container .van-button--primary[data-v-b43692fa]{margin:.35rem 0 .1rem;background-color:var(--main-color);border:1px solid var(--main-color);color:#fff;font-size:.18rem;height:.5rem;line-height:.52rem;width:90%;margin-left:5%}

dist/css/SignUp.edd113fc.css

@@ -1 +0,0 @@
-.SignUp[data-v-4fa20bf2]{max-width:700px;position:relative;overflow-y:auto;overflow-x:hidden;background-color:#fff;margin:0 auto}.container[data-v-4fa20bf2]{min-height:100vh;background:url(../img/signUpBg.e551d4ac.png) no-repeat top #f3f4f8;background-size:contain;overflow:hidden}.container h2[data-v-4fa20bf2]{position:absolute;padding-top:.4rem;color:#fff;font-size:.26rem;font-weight:700;width:2.1rem;text-align:left;margin-left:.16rem}.container .section[data-v-4fa20bf2]{background:#fff;margin:2.2rem .16rem .15rem;border-radius:.1rem;padding:.22rem}.container .section .title[data-v-4fa20bf2]{margin-top:.28rem;font-size:.18rem;color:#1a1a1a}.container .section .content[data-v-4fa20bf2]{padding-top:.05rem;color:grey;font-size:.16rem;word-break:break-all}.container .protocol[data-v-4fa20bf2]{font-size:.14rem;margin-bottom:.3rem;text-align:center;display:block;color:#0091ff}.container .van-button--primary[data-v-4fa20bf2]{margin:.35rem 0 .1rem;background-color:var(--main-color);border:1px solid var(--main-color);color:#fff;font-size:.18rem;height:.5rem;line-height:.52rem;width:90%;margin-left:5%}

dist/css/test.278367c5.css

@@ -0,0 +1 @@
+*{margin:0;padding:0}.show{width:200px;height:200px;position:relative;border-radius:50%;border:1px solid #d5d5d5}.picture,.show{overflow:hidden}.picture{width:100%;height:100%;background-position:50%;background-repeat:no-repeat;background-size:cover}

package-lock.json

@@ -5336,6 +5336,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exif-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npm.taobao.org/exif-js/download/exif-js-2.3.0.tgz",
+      "integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz",

package.json

@@ -13,6 +13,7 @@
     "core-js": "^2.6.5",
     "dayjs": "^1.8.29",
     "es6-promise": "^4.2.8",
+    "exif-js": "^2.3.0",
     "install": "^0.13.0",
     "lodash": "^4.17.15",
     "numeral": "^2.0.6",

src/main.js

@@ -24,9 +24,9 @@ Vue.config.productionTip = false
 
 
 //main.js中
-// import Vconsole from 'vconsole'
-// const vconsole = new Vconsole()
-// Vue.use(vconsole)
+import Vconsole from 'vconsole'
+const vconsole = new Vconsole()
+Vue.use(vconsole)
 // import VueAMap from 'vue-amap'
 // Vue.use(VueAMap)
 // VueAMap.initAMapApiLoader({

src/router/appRouter.js

@@ -16,6 +16,15 @@ let appRouter = [{
 		description: "报考详情",
 		weight: 3 // 页面权重
 	}
+}, {
+	path: "/test",
+	name: "test",
+	component: () =>
+		import( /* webpackChunkName: "test" */ "@/views/app/test"),
+	meta: {
+		description: "测试",
+		weight: 3 // 页面权重
+	}
 }]
 
 export default appRouter

src/views/app/test.vue

@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <div style="padding:20px;">
+      <div class="show">
+        <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
+      </div>
+      <div style="margin-top:20px;">
+        <input type="file" id="upload" accept="image" @change="upload" />
+        <label for="upload"></label>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+<script>
+import Exif from "exif-js";
+
+export default {
+  data() {
+    return {
+      headerImage: "",
+      picValue: ""
+    };
+  },
+  mounted() {},
+  methods: {
+    upload(e) {
+      let files = e.target.files || e.dataTransfer.files;
+      if (!files.length) return;
+      this.picValue = files[0];
+      this.imgPreview(this.picValue);
+    },
+    imgPreview(file) {
+      let self = this;
+      let Orientation;
+      //去获取拍照时的信息，解决拍出来的照片旋转问题
+      Exif.getData(file, function() {
+        Orientation = Exif.getTag(this, "Orientation");
+      });
+      // 看支持不支持FileReader
+      if (!file || !window.FileReader) return;
+
+      if (/^image/.test(file.type)) {
+        // 创建一个reader
+        let reader = new FileReader();
+        // 将图片2将转成 base64 格式
+        reader.readAsDataURL(file);
+        // 读取成功后的回调
+        reader.onloadend = function() {
+          let result = this.result;
+          let img = new Image();
+          img.src = result;
+          //判断图片是否大于100K,是就直接上传，反之压缩图片
+          if (this.result.length <= 100 * 1024) {
+            self.headerImage = this.result;
+            self.postImg();
+          } else {
+            img.onload = function() {
+              let data = self.compress(img, Orientation);
+              self.headerImage = data;
+              self.postImg();
+            };
+          }
+        };
+      }
+    },
+    postImg() {
+      //这里写接口
+    },
+    rotateImg(img, direction, canvas) {
+      //最小与最大旋转方向，图片旋转4次后回到原方向
+      const min_step = 0;
+      const max_step = 3;
+      if (img == null) return;
+      //img的高度和宽度不能在img元素隐藏后获取，否则会出错
+      let height = img.height;
+      let width = img.width;
+      let step = 2;
+      if (step == null) {
+        step = min_step;
+      }
+      if (direction == "right") {
+        step++;
+        //旋转到原位置，即超过最大值
+        step > max_step && (step = min_step);
+      } else {
+        step--;
+        step < min_step && (step = max_step);
+      }
+      //旋转角度以弧度值为参数
+      let degree = (step * 90 * Math.PI) / 180;
+      let ctx = canvas.getContext("2d");
+      switch (step) {
+        case 0:
+          canvas.width = width;
+          canvas.height = height;
+          ctx.drawImage(img, 0, 0);
+          break;
+        case 1:
+          canvas.width = height;
+          canvas.height = width;
+          ctx.rotate(degree);
+          ctx.drawImage(img, 0, -height);
+          break;
+        case 2:
+          canvas.width = width;
+          canvas.height = height;
+          ctx.rotate(degree);
+          ctx.drawImage(img, -width, -height);
+          break;
+        case 3:
+          canvas.width = height;
+          canvas.height = width;
+          ctx.rotate(degree);
+          ctx.drawImage(img, -width, 0);
+          break;
+      }
+    },
+    compress(img, Orientation) {
+      let canvas = document.createElement("canvas");
+      let ctx = canvas.getContext("2d");
+      //瓦片canvas
+      let tCanvas = document.createElement("canvas");
+      let tctx = tCanvas.getContext("2d");
+      let initSize = img.src.length;
+      let width = img.width;
+      let height = img.height;
+      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
+      let ratio;
+      if ((ratio = (width * height) / 4000000) > 1) {
+        console.log("大于400万像素");
+        ratio = Math.sqrt(ratio);
+        width /= ratio;
+        height /= ratio;
+      } else {
+        ratio = 1;
+      }
+      canvas.width = width;
+      canvas.height = height;
+      //        铺底色
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      //如果图片像素大于100万则使用瓦片绘制
+      let count;
+      if ((count = (width * height) / 1000000) > 1) {
+        console.log("超过100W像素");
+        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
+        //            计算每块瓦片的宽和高
+        let nw = ~~(width / count);
+        let nh = ~~(height / count);
+        tCanvas.width = nw;
+        tCanvas.height = nh;
+        for (let i = 0; i < count; i++) {
+          for (let j = 0; j < count; j++) {
+            tctx.drawImage(
+              img,
+              i * nw * ratio,
+              j * nh * ratio,
+              nw * ratio,
+              nh * ratio,
+              0,
+              0,
+              nw,
+              nh
+            );
+            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
+          }
+        }
+      } else {
+        ctx.drawImage(img, 0, 0, width, height);
+      }
+      //修复ios上传图片的时候 被旋转的问题
+      if (Orientation != "" && Orientation != 1) {
+        switch (Orientation) {
+          case 6: //需要顺时针（向左）90度旋转
+            this.rotateImg(img, "left", canvas);
+            break;
+          case 8: //需要逆时针（向右）90度旋转
+            this.rotateImg(img, "right", canvas);
+            break;
+          case 3: //需要180度旋转
+            this.rotateImg(img, "right", canvas); //转两次
+            this.rotateImg(img, "right", canvas);
+            break;
+        }
+      }
+      //进行最小压缩
+      let ndata = canvas.toDataURL("image/jpeg", 0.1);
+      console.log("压缩前：" + initSize);
+      console.log("压缩后：" + ndata.length);
+      console.log(
+        "压缩率：" + ~~((100 * (initSize - ndata.length)) / initSize) + "%"
+      );
+      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
+      return ndata;
+    }
+  }
+};
+</script>
+ 
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+.show {
+  width: 200px;
+  height: 200px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 50%;
+  border: 1px solid #d5d5d5;
+}
+.picture {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>

src/views/signup/SignUp.vue

@@ -146,7 +146,7 @@ export default {
 	}
 	.section {
 		background: #ffffff;
-		margin: 2.2rem .16rem .15rem;
+		margin: 2rem .16rem .15rem;
 		border-radius: .1rem;
 		padding: .22rem;
 		.title {

src/views/signup/SignUpBaseInfo.vue

@@ -8,7 +8,7 @@
         <van-field v-model="form.idCardNo" readonly required name="idCardNo" label="身份证号" placeholder="请输入身份证号" >
             <template #button>
                 <!-- <span class="codeText">上传</span> -->
-                <van-uploader :before-read="beforeRead"
+                <van-uploader :before-read="beforeRead2"
                                 :after-read="afterReadOCR"
                                 accept="image/*"
                                 :max-count="1">
@@ -170,7 +170,6 @@ export default {
         },
         onCheckFields() { // 校验字段
             let form = this.form
-            console.log(form)
             if(!form.idCardNo || !form.realName || !form.birthdate || !form.nation) {
                 this.$toast('请上传身份证正面进行扫描')
                 return false
@@ -180,6 +179,14 @@ export default {
             }
             return true
         },
+        beforeRead2(file) {
+            const isLt2M = file.size / 1024 / 1024 < 4
+            if (!isLt2M) {
+                this.$toast('上传证书大小不能超过 4MB')
+                return false
+            }
+            return true
+        },
         beforeRead(file) {
             const isLt2M = file.size / 1024 / 1024 < 2
             if (!isLt2M) {