Vue 实现 上传图片 二维码识别 + 条形码识别(qrcode-decoder插件)

时间：2025-02-09 07:59:17

需求

端H5 实现 上传图片 自动识别二维码内容

2.具体业务 比如 上传电影票 自动识别取票码或者其他的二维码上传(主要是为增加用户体验)

二维码(插件)：

1.使用Npm安装qrcode-decoder

npm i qrcode-decoder --registry=

2.创建一个方法 

// 引入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 = (file) || (file)
    // if () {
    //     URi = (file);
    // } else if ( && ) {
    //     URi = (file);
    // } else {
    //     URi = null;
    // }
    const url = URi
    // 初始化
    const qr = new QrCode()
    // 解析二维码，返回promise
    return (url)
}

3.在页面上使用

const handleFileChange = (event, index) => {
  (event, index);

  (
    [0].files[0],
    ""
  );
  // onFileChange([0].files[0], index);
  handleUpload([0].files[0], index);

  // onFileChange([0].files[0]);

  const result = getQrUrl([0].files[0])
  (res => {
    (res);
    if () {
      (, '二维码内容')
      if ( > 12) {
        imageList[index].code = 
        if (("|") != -1 &&  > 12) {
          var str = ("|")
          imageList[index].code = str[0]
          imageList[index].yanz = str[1]
        }
      } else if (("|") == -1 &&  == 12) {
        imageList[index].code = (0, 6)
        imageList[index].yanz = (6)
      } else if (("|") == -1 &&  < 12) {
        imageList[index].code = 
        imageList[index].yanz = ""
      }
      //   Toast('识别二维码成功!')
    } else {
      ({
        title: "识别失败，请重新上传",
        icon: "none",
        duration: 2000,
      })
    }
  })
};

我的这个方法是上传图片的 获取的参数是file 在你们的那里可能不一样 根据你们的实际需求去调整

相关文章