vue3+ts H5拍照上传(图片压缩)

  /**
   * node包需要执行 npm i lrz(图片压缩 ) npm i weui(使用于微信UI相同的样式组件)
   * 使用 vue3 + ts rem单位  
   * H5的拍照
   * 关于ios和安卓  ios没有直接打开相册的操作,所以为了统一使用移动端原生的input(弹出选择相册+相机)
   * 
   */
<template>
  <div class="firstStep">
    <div id="toast" v-if="toastShow">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据核检中...</p>
      </div>
    </div>
    <div class="_box">
      <div class="_pic">
        <div
          class="_front"
          :style="{
            backgroundImage: `url(${frontImgUrl.length ? frontImgUrl : ''})`,
            backgroundColor: `${
              frontImgUrl.length ? 'transparent' : '#eeeff1'
            }`,
          }"
        >
          <div class="_cent1" v-if="!frontImgUrl.length">
            <input
              type="file"
              id="inputCamera"
              class="inputCamera"
              ref="inputCamera"
              name="file"
              accept="image/*"
              @click.stop="addPic(1)"
              @change="onFileChange($event)"
            />
            <div class="bg">
              <label class="iconfont iconpaizhao"></label>
            </div>
            <p>点击上传人像面</p>
          </div>
        </div>
        <div
          class="_back"
          :style="{
            backgroundImage: `url(${backImgUrl.length ? backImgUrl : ''})`,
            backgroundColor: `${backImgUrl.length ? 'transparent' : '#eeeff1'}`,
          }"
        >
          <div class="_cent1" v-if="!backImgUrl.length">
            <input
              type="file"
              id="inputCamera"
              class="inputCamera"
              ref="inputCamera"
              name="file"
              accept="image/*"
              @click.stop="addPic(2)"
              @change="onFileChange($event)"
            />
            <div class="bg">
              <label class="iconfont iconpaizhao"></label>
            </div>
            <p>点击上传国徽面</p>
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
    <div
      class="_next"
      :class="displayNext ? 'displayBut' : ''"
      @click="displayNext ? '' : nextDown()"
    >
      下一步
    </div>
  </div>
</template>
<script lang="ts">
import lrz from "lrz"; //引入别名  压缩文件
import { defineComponent, reactive, toRefs, getCurrentInstance } from "vue"; 

interface DataProps {
  side: number; //那一面  1:正面  2:反面
  frontImgUrl: any; //身份证人像面
  backImgUrl: any; //身份证国徽面
  toastShow: boolean; //数据上传loading
  setData: any; //OCR认证额的函数
}
export default defineComponent({
  name: "FirstStep",
  components: {},
  props: {},
  setup() {
    //需要展现到页面的变量
    const { proxy }: any = getCurrentInstance();
    const data: DataProps = reactive({
      side: 1,
      frontImgUrl: "",
      backImgUrl: "",
      toastShow: false,
      /**
       *选择拍照
       */
      addPic(index: any) {
        data.side = index;
        return false;
      },
      /**
       * 触发原生的手机拍照1
       */
      onFileChange(e: any) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        createImage(files);
      },
      /**
       * OCR图片认证
       */
      setData(file: any) {
      //分装的全局请求
        proxy.$httpService
          .postData("个人的接口")
          .then((res: any) => {
            res;
            switch (data.side) {
              case 1:
                data.frontImgUrl = file.base64; //身份证人像面
                break;
              case 2:
                data.backImgUrl = file.base64; //身份证国徽面
                break;
              default:
                break;
            }
            data.toastShow = false;
          })
          .catch((e: any) => {
            e;
          });
      },
      /**
       * 下一步点击
       */
      nextDown() {
        if (data.frontImgUrl && data.backImgUrl) {
          // eslint-disable-next-line no-console
          console.log("下一步");
        }
      },
    });
    const refData = toRefs(data);

    /***
     * 触发原生的手机拍照2
     */
    function createImage(file: any) {
      data.toastShow = true;
      lrz(file[0], { width: 1125 }).then((rst: any) => {
        data.setData(rst);
      });
    }
    /**
     * 抛出最终使用的参数+事件
     */
    return {
      ...refData,
    };
  },
});
</script>

<style lang="scss" scoped>
.firstStep {
  ._box {
    padding: 0.75rem 1.25rem 2.25rem;
    ._pic {
      ._front,
      ._back {
        float: left;
        height: 6.25rem;
        background-color: #eeeff1;
        width: 48.5%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        ._cent1 {
          position: relative;
          .inputCamera {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            opacity: 0;
          }
          .bg {
            margin: 0.4375rem auto 0;
            width: 6.25rem;
            height: 4.3875rem;
            display: flex;
            label {
              margin: auto;
              background: rgba(0, 0, 0, 0.5);
              height: 2rem;
              width: 2rem;
              border-radius: 50%;
              text-align: center;
              line-height: 2rem;
              font-size: 1rem;
              color: #ffffff;
              display: block;
            }
          }
          p {
            font-family: PingFangSC-Regular;
            font-size: 0.75rem;
            color: #233347;
            letter-spacing: 0.0075rem;
            text-align: justify;
            text-align: center;
          }
        }
      }
      ._front {
        .bg {
          background: url("./../../assets/first/pic1.png") center center
            no-repeat;
          background-size: 100%;
        }
      }
      ._back {
        float: right;
        .bg {
          background: url("./../../assets/first/pic2.png") center center
            no-repeat;
          background-size: 100%;
        }
      }
    }
  }
  ._next {
    margin: 0 2.5rem 0.75rem;
    height: 2.8125rem;
    line-height: 2.8125rem;
    text-align: center;
    background: #3874f6;
    box-shadow: 0 2px 4px 0 rgba(56, 116, 246, 0.1);
    border-radius: 8px;
    border-radius: 8px;
    font-family: PingFangSC-Regular;
    font-size: 1rem;
    color: #ffffff;
  }
}
</style>

卑微小生 在线求赞