vue使用qrcode-decoder解析二维码

项目地址

• github

安装

npm install qrcode-decoder --registry=https://registry.npm.taobao.org

封装为函数

// 引入qrcode-decoder
import QrCode from 'qrcode-decoder'

// 传入file对象，返回promise
export function getQrUrl(file) {
  // 获取临时路径 chrome有效，其他浏览器的方法请自行查找
  const url = window.webkitURL.createObjectURL(file)
  // 初始化
  const qr = new QrCode()
  // 解析二维码，返回promise
  return qr.decodeFromImage(url)
}

vue组件中调用

使用了emement的upload组件

<template>
  <el-upload
    action=""
    :show-file-list="false"
    :http-request="resolveQR"
  >
    <el-button
      type="success"
    >上传</el-button>
  </el-upload>
</template>

methods: {
    resolveQR(event) {
      const result = getQrUrl(event.file)
      result.then(res => {
        if (res.data) {
          console.log(res.data)
          this.$message.success('识别二维码成功!')
        } else {
          this.$message.error('识别二维码失败, 请重新上传')
        }
      }).catch(err => {
        this.$message.error(JSON.stringify(err))
      })
    }
  }