前端 vue 二维码解析工具

最新推荐文章于 2025-11-10 14:47:28 发布

原创最新推荐文章于 2025-11-10 14:47:28 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍了如何利用qrcode-decoder库解析上传的美团二维码图片，获取团购券码并进行核销，详细步骤包括安装依赖、引入工具和处理上传文件的逻辑。

部署运行你感兴趣的模型镜像

因为项目需要获取美团的团购券码核销功能所以需要解析二维码图片

下面需要用到这个工具“qrcode-decoder”

先安装这个工具依赖

npm i qrcode-decoder

然后引入

import QrCode from 'qrcode-decoder'

在需要解析的函数内，使用工具

decodeQrCode(file) {
      var that = this;
      var url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      // console.log(url)
      const qr = new QrCode()
      qr.decodeFromImage(url).then(res=>{
        // console.log(res.data)
        Notify({ type: "danger", message: "券码识别成功" });
        that.couponCode = res.data;
      }).catch(err=>{
        setTimeout(() => {
          that.$toast({
            overlay: true,
            message: "券码识别失败，请重新上传",
            duration: 2000,
          });
          that.couponCode = "";
        }, 2000);
      })
    },

file是二维码图片文件我这里是用vant的Uploader上传组件获取到的用别的ui组件也是一样的逻辑

qr.decodeFromImage返回的res.data就是解析结果

您可能感兴趣的与本文相关的镜像