ebiz-h5/src/components/ebiz/sale/UploadImageFile.vue

<template>
  <div>
    <!-- <van-button @click="eee" class="mt12" type="primary">人脸识别</van-button> -->
    <!-- <van-uploader name="fileListIdFront" ref="uploader" capture="camera" :preview-image="false" :after-read="afterRead" class="mt10 ml20">
      <slot></slot>
    </van-uploader> -->
    <input type="file" ref="file" @change="addImg" accept="image/*" capture="camera" style="display:none" />
  </div>
</template>
<script>
import { Uploader, button } from 'vant'
import { uploadImg, getRecognitionUrl, getRecognitionResult } from '@/api/ebiz/sale/sale'
export default {
  name: 'UploadImageFile',
  props: {
    // 是否展示
    realName: {
      type: String,
      default: ''
    },
    // start_ocr: {
    //   type: String,
    //   default: ''
    // },
    idno: {
      type: String,
      default: ''
    },
    typeface: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      file: '',
      imgName: '',
      fileListIdFront: [],
      isSuccess: false,
      bizToken: '',
      requestId: '',
      recognizeResult: '', //人脸识别结果
      recognizeMessage: '' //人脸识别失败原因
    }
  },
  components: {
    [button.name]: button,
    [Uploader.name]: Uploader
  },
  watch: {
    // typeface(v) {
    //   console.log(v, 'v')
    //   if (v == '1') {
    //     this.$refs.file.dispatchEvent(new MouseEvent('click'))
    //     this.typeface = '0'
    //   }
    // }
    typeface: {
      deep: true,
      handler: function() {
        this.$refs.file.dispatchEvent(new MouseEvent('click'))
        //     this.typeface = '0'
      }
    }
  },
  methods: {
    eee() {
      console.log(this.$refs.uploader)
      this.$refs.file.dispatchEvent(new MouseEvent('click'))
    },
    addImg(e) {
      this.$toast.loading({
        // 持续展示 toast
        duration: 0,
        // 禁用背景点击s
        forbidClick: true,
        loadingType: 'spinner',
        message: '加载中……'
      })
      let that = this
      this.file = this.$refs.file.files[0]
      var reader = new FileReader()
      reader.onload = (function(file) {
        return function(e) {
          let result = this.result
          console.info(this.result)

          // 上传图片
          uploadImg(formdata).then(res => {
            let num = 0
            that.recognition(res, num)
          })
        }
      })(e.target.files[0])
      reader.readAsDataURL(e.target.files[0])

      let formdata = new FormData()
      formdata.append('imgPath', that.file)
    },
    /*
    recognition(val, num) {
      let data = {}
      num++
      console.log(num)
      if (window.localStorage.failedNumber == '0') {
        // 第一次人脸失败传180
        data = { imgData: val.path, realName: this.realName, idno: this.idno, isFly: '270', num: num }
      } else {
        data = { imgData: val.path, realName: this.realName, idno: this.idno, isFly: '90', num: num }
      }
      recognition(data).then(res => {
        if (res.result == '0' && res.content.result == '1') {
          window.localStorage.failedNumber = ''
          this.isSuccess = true
        } else if (res.result == '0' && res.content.result == '2') {
          window.localStorage.failedNumber = '0'
          this.recognition(val, num)
        } else {
          this.$toast(res.resultMessage)
        }
        this.$emit('sendimage', this.isSuccess)
      })
    }
    */

    async recognition(val, num) {
      num++
      await this.getRecognitionUrl(val, num)
      if (this.requestId && this.bizToken) {
        await this.getRecognitionResult(this.requestId, this.bizToken, JSON.parse(localStorage['orderNo']))
      } else {
        return
      }
      this.$emit('sendimage', this.isSuccess)
    },

    getRecognitionUrl(val, num) {
      return new Promise((resolve, reject) => {
        let data = { realName: this.realName, idno: this.idno, redirectUrl: '/sale/' }
        console.log('获取URL请求参数', data)
        getRecognitionUrl(data).then(
          res => {
            console.log('getRecognitionUrl', res)
            if (res.result == '0') {
              this.requestId = res.content.requestId
              this.bizToken = res.content.bizToken
              window.location.href = res.content.url
            } else {
              this.$toast(res.resultMessage)
            }
          },
          error => {
            console.log(error)
          }
        )
      })
    },
    getRecognitionResult(requestId, bizToken, orderNo) {
      return new Promise((resolve, reject) => {
        getRecognitionResult({ requestId, bizToken, orderNo }).then(
          res => {
            console.log('getRecognitionResult', res)
            if (res.result == '0') {
              this.recognizeResult = res.content.result
              this.recognizeMessage = res.content.result == '1' ? res.content.resultMessage : ''
              this.isSuccess = true
            } else {
              this.$toast(res.resultMessage)
            }
          },
          error => {
            console.log(error)
          }
        )
      })
    }
  }
}
</script>