Web H5 中上传身份证利用Vant组件 压缩图片大小

最近要做一个 用户可以自己上传身份证，并且 数据回显的一个状态

可能大家都会选择用组件库 ，来做这个功能，我也一样 我的方法 大家可以直接赋值用，把变量一换就可以了 非常简单

<template>
  <div class="warpn_box">
      <div class="idcard_uploader">
        <van-uploader 
          v-model="fileList" 
          :after-read="afterRead"
          max-count="1"
          upload-text="请拍摄或上传身份证照片"
        />
      </div>
       <div class="tips">小贴士： 为避免影响出行，请确保填写信息与证件一致</div>
       <div class="ch_name">
         <div class="ch_name_one">
          <span class="name_left">中文姓名</span>
          <input placeholder="请输入姓名(例：张三)" class="name_input" type="text" v-model="form.idCardName">
         </div>
       </div>
       <div class="number_card">
        <div class="types">
          <span class="name_left">证件类型</span>
          <span class="pattern_card">身份证</span>
        </div>
        <div class="types_of">
         <span class="name_left">证件号码</span>
         <input type="text" placeholder="请输入证件号码" class="name_input" v-model="form.idCardNumber" maxlength="18">
        </div>
       </div>
     </div>
</template>

2. 要去安装一个图片压缩的包  npm install compressorjs  大家也可以去了解一下

 

<script>
import Compressor from 'compressorjs';
export default {
  data() {
    return {
      form: {
        idCardName: "",
        idCardNumber: "",
        id: ''
      },
      fileList: [],
      params: {}
    }
  },

  methods:{
     // 文件上传完毕后会触发 after- read 回调函数，获取到对应的 file 对象。
    afterRead(file) {
      console.log(file, `源文件大小${file.file.size / 1024 / 1024}mb`);
      file.status = 'uploading';
      file.message = '压缩中...';
      this.fileList = [file];

      // 压缩原图片
      new Compressor(file.file, {
        quality: 0.8,
        maxWidth: 1920, // 最大宽
        maxHeight: 1920, // 最大高
        convertTypes: ['image/png', 'image/jpeg', 'image/webp'],
        convertSize: 2000000, // 最大文件大小
        success: resultFile => {
          console.log(resultFile, `压缩后文件大小${resultFile.size / 1024 / 1024}mb`);

          // 文件转base64
          const reader = new FileReader();
          // 读取文件内容，结果用的字符串形式表示
          reader.readAsDataURL(resultFile);
          // 事件在读取完成后触发
          reader.onload = () => {
            // 加入图片列表
            this.fileList = [{
              content: reader.result,
              file: resultFile,
              status: 'uploading',
              message: '识别中...'
            }];

            //表单初始化
            var form = new FormData();
            form.append('ocrType', 1);
            form.append('file', resultFile, resultFile.name);

            postAction('你的请求地址', form).then(res => {
              if (res.data.code == 200) {
                this.fileList[0].status = 'done';
                this.$toast('身份证识别成功');

                this.form.idCardName = res.data.data.ocrData.idCardName;
                this.form.idCardNumber = res.data.data.ocrData.idCardNumber;
              } else {
                this.$toast(res.data.message);
              }
            }).catch(() => {
              this.$toast('身份证识别请求失败');
            }).finally(() => {
              this.fileList[0].status = 'done';
            })
          }
          reader.onerror = () => {
            this.fileList[0].status = 'done';
            console.log('图片处理失败');
            this.$toast('图片处理失败');
          };
        },
        error(err) {
          this.fileList[0].status = 'done';
          console.log(err.message);
          this.$toast(err.message);
        },
      });
    },




   }
}
</script>