上传身份证之前先进行压缩。

src/utils/image.js

@@ -0,0 +1,40 @@
+export function resize(base64, callback) {
+  const w = 1440
+  var newImage = new Image()
+  var quality = 0.8 //压缩系数
+  newImage.src = base64
+  newImage.setAttribute('crossOrigin', 'Anonymous')
+  var imgWidth, imgHeight
+  newImage.onload = function () {
+    imgWidth = this.width
+    imgHeight = this.height
+    var canvas = document.createElement('canvas')
+    var ctx = canvas.getContext('2d')
+    if (Math.max(imgWidth, imgHeight) > w) {
+      if (imgWidth > imgHeight) {
+        canvas.width = w
+        canvas.height = (w * imgHeight) / imgWidth
+      } else {
+        canvas.height = w
+        canvas.width = (w * imgWidth) / imgHeight
+      }
+    } else {
+      canvas.width = imgWidth
+      canvas.height = imgHeight
+      quality = 0.8
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
+    var base64 = canvas.toDataURL('image/jpeg', quality) // 执行压缩
+    while (base64.length / 1024 > 500) {
+      quality -= 0.01
+      base64 = canvas.toDataURL('image/jpeg', quality)
+    }
+    // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
+    // while (base64.length / 1024 < 50) {
+    // 	quality += 0.001;
+    // 	base64 = canvas.toDataURL("image/jpeg", quality);
+    // }
+    callback(base64) //必须通过回调函数返回，否则无法及时拿到该值
+  }
+}

src/views/mine/patient-id-cards/CreatePatientCard.vue

@@ -8,13 +8,12 @@
           <img style="width: 100%; height: 100%" :src="capImg" />
         </van-uploader>
       </div>
-
       <div class="cap-tip">
         <van-tag type="danger">拍摄要求</van-tag>
         <p>*&nbsp;&nbsp;身份证置于纯色背景上</p>
         <p>*&nbsp;&nbsp;拍摄身份证时请靠近证件并垂直拍摄</p>
         <div style="margin: 20px">
-          <van-button type="primary" block :disabled="disableUpload" @click="uploadIdCard">确定上传</van-button>
+          <van-button type="primary" block :disabled="disableUpload" @click="resizeIdCard">确定上传</van-button>
           <div style="height: 10px"></div>
           <van-button block @click="showInputDialog = true">没带身份证，填写信息</van-button>
         </div>
@@ -60,6 +59,7 @@ import { isValidIdcard, isValidPhone } from '../../../utils/validate'
 import { Toast } from 'vant'
 import router from '../../../router'
 import { getLocalOpenId } from '../../../utils/check-patient-id'
+import { resize } from '../../../utils/image'
 export default {
   setup() {
     const windowSize = store.state.windowSize
@@ -75,8 +75,9 @@ export default {
       return fileList.value.length !== 1
     })
     const defaultDistrict = ref('430105')
-    const uploadIdCard = () => {
-      readImage(fileList.value[0]).then((res) => {
+
+    const uploadIdCard = (base64) => {
+      readImage({ content: base64 }).then((res) => {
         inputInfo.name = res.name
         inputInfo.socialNo = res.socialNo
         inputInfo.district = res.district
@@ -92,6 +93,16 @@ export default {
         showInputDialog.value = true
       })
     }
+
+    const resizeIdCard = () => {
+      let content = fileList.value[0].content
+      if (content.length / 1024 < 500) {
+        uploadIdCard(content)
+      } else {
+        resize(content, uploadIdCard)
+      }
+    }
+
     const inputInfo = reactive({
       openId: getLocalOpenId(),
       name: null,
@@ -184,7 +195,7 @@ export default {
       defaultDistrict,
       fileList,
       disableUpload,
-      uploadIdCard,
+      resizeIdCard,
       inputInfo,
       showInputDialog,
       showArea,