vue使用qrcode-decoder解析识别二维码

//使用npm安装qrcode-decoder
npm install qrcode-decoder --registry=https://registry.npm.taobao.org

js封装

// 引入qrcode-decoder，
import QrCode from 'qrcode-decoder'
// 部分网友反应上面的引入，这个引入的是一个空对象，不能使用，已经给开发者提issues了，希望能尽快修复不能使用或报错，可以试试下面这种
import QrCode from '../node_modules/qrcode-decoder/dist/index';
// 传入file对象，返回promise
export function getQrUrl(file) {
	//使用这个方法或者下面被注释的方法设置浏览器读取文件方式，chrome和ie有效，其他浏览器没测试
    const URi = window.webkitURL.createObjectURL(file) ||  window.URL.createObjectURL(file)
    // if (window.webkitURL) {
    //     URi = window.webkitURL.createObjectURL(file);
    // } else if (window.URL && window.URL.createObjectURL) {
    //     URi = window.URL.createObjectURL(file);
    // } else {
    //     URi = null;
    // }
    const url = URi
    // 初始化
    const qr = new QrCode()
    // 解析二维码，返回promise
    return qr.decodeFromImage(url)
 }

html

<template>
	// 移动端vant——ui
    <van-uploader :after-read="resolveQR" />
</template>
<script>
import { Uploader,Toast } from "vant";
import {getQrUrl} from '../../utils/qrcode'
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    resolveQR(event) {
      const result = getQrUrl(event.file)
      result.then(res => {
        if (res.data) {
          console.log(res.data,'二维码内容')
          Toast(res.data)
        //   Toast('识别二维码成功!')
        } else {
          Toast('识别二维码失败, 请重新上传')
        }
      }).catch(err => {
        Toast(JSON.stringify(err))
      })
    }
  },
};
</script>

转发链接： vue使用qrcode-decoder解析二维码