vue.js3:用qrcode-parser解析二维码图片(vue@3.2.36)

一，安装qrcode-parser第三方库:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm install --save qrcode-parser
 
added 4 packages in 4s

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list qrcode-parser
imgtouch@0.1.0 /data/vue/imgtouch
└── qrcode-parser@2.0.4

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码

<template>
  <div style="background:#efefef;">
 
    <img id="fg" :src="imgSrc" style="width:300px;" />
 
    <div>
      选择二维码图片:
      <input type="file" ref="hiddenfile" accept="image/*" @change="readQr" class="hiddenInput" />
    div>
 
    <div>
      <el-input
          v-model="qrText"
          :rows="2"
          type="textarea"
          placeholder="..."
          readonly = "true"
          style="width:500px;"
      />
    div>
 
  div>
template>
 
<script>
import {ref} from "vue";
import qrcodeParser from 'qrcode-parser'
 
export default {
  name: "QrparseImg",
  setup() {
    //图片的src
    const imgSrc = ref("static/image/dog.jpg");
    //读取到的数据
    const qrText = ref("...");
    //读取exif
    const readQr = (e) => {
      let file = e.target.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () =>{
        //显示图片
        imgSrc.value = reader.result;
        //解析二维码图片
        qrcodeParser(file).then(res =>{
          console.log(res);
          qrText.value = res;
        }).catch((err) => {
          console.log('error', err)
          qrText.value = "图片中未解析到数据";
        })
      }
    }
    return {
      imgSrc,
      readQr,
      qrText,
    }
  }
};
script>
 
<style scoped>
style>

三，查看效果

四，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue
imgtouch@0.1.0 /data/vue/imgtouch
├─┬ @vue/cli-plugin-babel@5.0.4
│ └─┬ @vue/babel-preset-app@5.0.4
│   └── vue@3.2.36 deduped
├─┬ element-plus@2.2.2
│ ├─┬ @element-plus/icons-vue@1.1.4
│ │ └── vue@3.2.36 deduped
│ ├─┬ @vueuse/core@8.6.0
│ │ ├─┬ @vueuse/shared@8.6.0
│ │ │ └── vue@3.2.36 deduped
│ │ ├─┬ vue-demi@0.13.1
│ │ │ └── vue@3.2.36 deduped
│ │ └── vue@3.2.36 deduped
│ └── vue@3.2.36 deduped
└─┬ vue@3.2.36
  └─┬ @vue/server-renderer@3.2.36
    └── vue@3.2.36 deduped