使用QrCode解析二维码

使用QrCode识别二维码

1、引入QrCode

import QrCode from 'qrcode-decoder'

2、HTML

        使用el-upload上传图片

<el-form-item
  label="设备识别码"
  prop="deviceSerialNo"
  class="position:relative"
>
  <dataInput
    v-if="qrFlag"
    v-model.trim="form.deviceSerialNo"
    :placeholder="$t('lang.pleaseInput')"
    :clearable="false"
    maxlength="32"
  />
  <el-upload
    ref="uploadQr"
    action=""
    :show-file-list="false"
    :http-request="successFnQr"
    class="img-upload"
  >
    <img
      :src="require('@/modules/authMng/assets/scaner.png')"
      alt=""
      style="vertical-align: middle;"
    >
  </el-upload>
  <canvas
    id="myCanvas"
    width="600"
    height="600"
    style="display: none"
  />
</el-form-item>

3、javascript

data(){
    return {
        fileListQr: [],
        qrFlag: true
    }
},  
methods: {
    getQrUrl (file) {
      // 获取临时路径
      const url = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file) || window.mozURL.createObjectURL(file)
      const qr = new QrCode()
      return qr.decodeFromImage(url) // 解析二维码，返回promise
    },
    successFnQr (event) {
      const result = this.getQrUrl(event.file)
      result.then(res => {
        if (res.data) {
          this.form.deviceSerialNo = res.data
          this.qrFlag = false
          this.$nextTick(() => { // 更新页面
            this.qrFlag = true
          })
          this.success('识别二维码成功!')
        } else {
          this.error('识别二维码失败，请重新上传')
        }
      }).catch(err => {
        this.error(JSON.stringify(err))
      })
    }

4 、css

    .img-upload {
      position: absolute;
      height: 30px;
      width: 30px;
      margin-top: -30px;
      margin-left: 94%;
      cursor: pointer;
    }

5 、效果图