3

zhaoxiaoqiang

2022-08-05 069b36a059a5319770722977b791823e979bdd9e

 src/components/upload/uploadIdCard.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2019-08-30 18:04:49
 * @LastEditors: zxq
 * @LastEditTime: 2022-08-04 15:25:02
 * @LastEditTime: 2022-08-04 16:08:29
 * @Description:
 -->
<template>
@@ -10,33 +10,37 @@
      <!--上传按钮-->
      <div class="pic-item-box-z" @click="handleUploadPicture(1)">
        <img v-if="picZ.fileUrl" :src="picZ.fileUrl" alt />
        <img v-if="!picZ.fileUrl&&cardFont" :src="cardFont" alt />
        <img v-if="!picZ.fileUrl && cardFont" :src="cardFont" alt />
      </div>
      <!--上传按钮-->
      <div class="pic-item-box-f" @click="handleUploadPicture(2)">
        <img v-if="picF.fileUrl" :src="picF.fileUrl" alt />
        <img v-if="!picF.fileUrl&&cardBack" :src="cardBack" alt />
        <img v-if="!picF.fileUrl && cardBack" :src="cardBack" alt />
      </div>
    </div>
    <!-- 真正的上传按钮-->
    <div>
      <input
        style="display: none;cursor:pointer"
        type="file"
        id='androidInputFileImage'
        ref="androidInputFileImage"
        @change="handlePhotoChange($event,1)"
        accept="image/jpg, image/jpeg, image/png"
      />
      <input
        style="display: none;cursor:pointer;"
        type="file"
        id='androidInputFileCapture'
        ref="androidInputFileCapture"
        @change="handlePhotoChange($event,2)"
        accept="image/*"
        capture="camera"
      />
      <!-- <label class="upload" > -->
        <input
          style="cursor:pointer"
          type="file"
          id="androidInputFileImage"
          ref="androidInputFileImage"
          @change="handlePhotoChange($event, 1)"
          accept="image/jpg, image/jpeg, image/png"
        />
      <!-- </label> -->
      <!-- <label class="upload"  > -->
        <input
          style="cursor:pointer"
          type="file"
          id="androidInputFileCapture"
          ref="androidInputFileCapture"
          @change="handlePhotoChange($event, 2)"
          accept="image/*"
          capture="camera"
        />
      <!-- </label> -->
    </div>
    <!--选择上传图片还是拍照-->
    <van-action-sheet
@@ -69,42 +73,42 @@
      picZ: {},
      picF: {},
      zOrf: "",
      isFirst: true
      isFirst: true,
    };
  },
  props: {
    cardFont: {
      type: String
      type: String,
    },
    cardBack: {
      type: String
    }
      type: String,
    },
  },
  watch: {
    cardFont: function(newVal, oldVal) {
    cardFont: function (newVal, oldVal) {
      if (newVal) {
        this.picList[0].fileId = this.cardFont.slice(1);
        this.picList[0].fileUrl = this.cardFont;
      }
    },
    cardBack: function(newVal, oldVal) {
    cardBack: function (newVal, oldVal) {
      if (this.cardBack) {
        this.picList[1].fileId = this.cardBack.slice(1);
        this.picList[1].fileUrl = this.cardBack;
      }
    }
    },
  },
  methods: {
    ...mapMutations([SET_APP_LOADING]),
    // 处理图片上传的事件(deleteIndex---删除图片的索引)
    handlePhotoChange: function(evt,type) {
    handlePhotoChange: function (evt, type) {
      let that = this;
      let shebei = this.judgeBrand(navigator.userAgent.toLowerCase());
      that.SET_APP_LOADING(true);
      // 图片是单选还是多选
      const files = Array.prototype.slice.call(evt.target.files);
      // 图片的处理
      files.forEach(function(file, i) {
      files.forEach(function (file, i) {
        // 图片的拍摄方向
        var orientation;
        // 格式是否支持的判断
@@ -116,86 +120,86 @@
        // 获取文件内容
        let reader = new FileReader();
        // reader.readAsArrayBuffer(file);
        reader.onload = function(e) {
            // EXIF.getData(file, function() {
            //     orientation = EXIF.getTag(this, "Orientation");
                // console.log(orientation)
                // 使用exif，处理图片的旋转问题，然后执行回调函数(orientation永远是0);
                // if(type==2&&orientation){
                //       // 拍照上传
                //       that.getImgData(e.target.result, orientation, function(data) {
                //         // 这里可以使用校正后的图片data了
                //         var img = new Image();
                //         img.src = data;
                //         // 图片加载完毕之后进行压缩，然后上传
                //         if (img.complete) {
                          
                //           callback();
                //         } else {
                //           img.onload = callback;
                //         }
                //         // 图片的路径获取成功后
                //         function callback(){
                //           // 压缩后的图片的base64字符串
                //           let data = that.compress(img);
                //           // 调取接口上传图片
                //           that.submitUploadImg(that.fileType, data);
                //         }
                //     });
                // }else{
                  var comimg = new Image();
                  comimg.src = e.target.result;
                  comimg.onload = function(eimg){
                  let num = 1;
                  if(this.width<this.height){
                      num = 8
                  }
                  that.getImgData(e.target.result, num, function(data) {
                      // 这里可以使用校正后的图片data了
                      var img = new Image();
                      img.src = data;
                      // 图片加载完毕之后进行压缩，然后上传
                      if (img.complete) {
                        callback();
                      } else {
                        img.onload = callback;
                      }
                      // 图片的路径获取成功后
                      function callback() {
                        // 压缩后的图片的base64字符串
                        console.log(img.width,img.height)
                        let data = that.compress(img);
                        // 调取接口上传图片
                        that.submitUploadImg(that.fileType, data);
                        }
                    });
                  }
                // }
            // })
        reader.onload = function (e) {
          // EXIF.getData(file, function() {
          //     orientation = EXIF.getTag(this, "Orientation");
          // console.log(orientation)
          // 使用exif，处理图片的旋转问题，然后执行回调函数(orientation永远是0);
          // if(type==2&&orientation){
          //       // 拍照上传
          //       that.getImgData(e.target.result, orientation, function(data) {
          //         // 这里可以使用校正后的图片data了
          //         var img = new Image();
          //         img.src = data;
          //         // 图片加载完毕之后进行压缩，然后上传
          //         if (img.complete) {

          //           callback();
          //         } else {
          //           img.onload = callback;
          //         }
          //         // 图片的路径获取成功后
          //         function callback(){
          //           // 压缩后的图片的base64字符串
          //           let data = that.compress(img);
          //           // 调取接口上传图片
          //           that.submitUploadImg(that.fileType, data);
          //         }
          //     });
          // }else{
          var comimg = new Image();
          comimg.src = e.target.result;
          comimg.onload = function (eimg) {
            let num = 1;
            if (this.width < this.height) {
              num = 8;
            }
            that.getImgData(e.target.result, num, function (data) {
              // 这里可以使用校正后的图片data了
              var img = new Image();
              img.src = data;
              // 图片加载完毕之后进行压缩，然后上传
              if (img.complete) {
                callback();
              } else {
                img.onload = callback;
              }
              // 图片的路径获取成功后
              function callback() {
                // 压缩后的图片的base64字符串
                console.log(img.width, img.height);
                let data = that.compress(img);
                // 调取接口上传图片
                that.submitUploadImg(that.fileType, data);
              }
            });
          };
          // }
          // })
        };
        reader.readAsDataURL(file);
      });
    },
    // type文件上传的路径，data图片的base64字符串(删除图片即重新上传)
    submitUploadImg: function(type, base64) {
    submitUploadImg: function (type, base64) {
      let that = this;
      // 防止操作的模态窗
      let submitInfo = {
        base64Data: base64.split(",")[1], // 文件base64
        suffix: base64.split(",")[0].split(";")["0"].split("/")[1]
        suffix: base64.split(",")[0].split(";")["0"].split("/")[1],
      };
      this.$api.uploadFile(submitInfo).then(
        res => {
        (res) => {
          if (that.zOrf == 1) {
            that.picZ = {
              fileUrl: res.body.fileUrl,
              fileId: res.body.fileId
              fileId: res.body.fileId,
            };
            that.picList[0] = that.picZ;
          } else {
            that.picF = {
              fileUrl: res.body.fileUrl,
              fileId: res.body.fileId
              fileId: res.body.fileId,
            };
            that.picList[1] = that.picF;
          }
@@ -204,7 +208,7 @@
          }
          that.SET_APP_LOADING(false);
        },
        error => {
        (error) => {
          this.SET_APP_LOADING(false);
        }
      );
@@ -215,9 +219,9 @@
        this.$api
          .getIdCardInfo({
            idBackId: this.picList[1].fileId,
            idFrontId: this.picList[0].fileId
            idFrontId: this.picList[0].fileId,
          })
          .then(res => {
          .then((res) => {
            let obj = res.body;
            obj.idBackUrl = this.picList[1].fileUrl;
            obj.idFrontUrl = this.picList[0].fileUrl;
@@ -226,14 +230,14 @@
      }
    },
    // 图片旋转处理
    getImgData: function(img, dir, next) {
    getImgData: function (img, dir, next) {
      // @param {string} img 图片的base64
      // @param {int} dir exif获取的方向信息
      // @param {function} next 回调方法，返回校正方向后的base64
      var image = new Image();
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      image.onload = function() {
      image.onload = function () {
        let resultWidth = 0;
        let resultHeight = 0;
        let maxWidthOrHeight = 1024;
@@ -282,23 +286,23 @@
      image.src = img;
    },
    compress(img) {
        let quality = 0.92, //压缩比例
      let quality = 0.92, //压缩比例
        w = img.width,
        h = img.height,
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(img, 0, 0, w, h);
        return canvas.toDataURL("image/jpeg", quality);
      canvas.width = w;
      canvas.height = h;
      ctx.drawImage(img, 0, 0, w, h);
      return canvas.toDataURL("image/jpeg", quality);
    },
    checkAuth(id) {
      // authStatus: 0 未授权  1授权---用户授权后才能执行下一步
      this.$api
        .checkAuth({
          fileId: id
          fileId: id,
        })
        .then(res => {
        .then((res) => {
          if (res.body.authStatus === 1) {
            this.$emit("on-check-auth", "下一步");
          }
@@ -313,10 +317,17 @@
    },
    // 选择拍照或者相册选项
    handleMenuSelect(item, index) {
      console.log(this.$refs,index)
      console.log(this.$refs);
      console.log(this.$refs.androidInputFileCapture);
      console.log(this.$refs.androidInputFileImage);
      
      if (index === 0) {
        // this.$refs.androidInputFileCapture.dispatchEvent(
        //   new MouseEvent("click")
        // );
        this.$refs.androidInputFileCapture.click();
      } else {
        // this.$refs.androidInputFileImage.dispatchEvent(new MouseEvent("click"));
        this.$refs.androidInputFileImage.click();
      }
      this.selectModel = false;
@@ -326,42 +337,64 @@
      this.selectModel = true;
    },
    judgeBrand(sUserAgent) {
       var isIphone = sUserAgent.match(/iphone/i) == "iphone";
       var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
       var isHonor = sUserAgent.match(/honor/i) == "honor";
       var isOppo = sUserAgent.match(/oppo/i) == "oppo";
       var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
       var isVivo = sUserAgent.match(/vivo/i) == "vivo";
       var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
       var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
       var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
       var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
       if (isIphone) {
           return 'iphone';
       } else if (isHuawei || isHonor) {
           return 'huawei';
       } else if (isOppo || isOppoR15) {
           return 'oppo';
       } else if (isVivo) {
           return 'vivo';
       } else if (isXiaomi || isRedmi || isXiaomi2s) {
           return 'xiaomi';
       } else if (isSamsung) {
           return 'samsung';
       } else {
           return 'default';
       }
   }
      var isIphone = sUserAgent.match(/iphone/i) == "iphone";
      var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
      var isHonor = sUserAgent.match(/honor/i) == "honor";
      var isOppo = sUserAgent.match(/oppo/i) == "oppo";
      var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
      var isVivo = sUserAgent.match(/vivo/i) == "vivo";
      var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
      var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
      var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
      var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
      if (isIphone) {
        return "iphone";
      } else if (isHuawei || isHonor) {
        return "huawei";
      } else if (isOppo || isOppoR15) {
        return "oppo";
      } else if (isVivo) {
        return "vivo";
      } else if (isXiaomi || isRedmi || isXiaomi2s) {
        return "xiaomi";
      } else if (isSamsung) {
        return "samsung";
      } else {
        return "default";
      }
    },
  },
  created(){
  //  let 
  //  console.log(shebei);
  }
  created() {
    //  let
    //  console.log(shebei);
  },
};
</script>

<style lang="less" scoped >
<style lang="less" scoped>
.component-photo-upload {
  .upload {
    cursor: pointer;
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    margin: -1px;
  }
  .pic-title {
    h4 {
      padding: 10px 0;