vue2 实现解析二维码图片/二维码图片链接，区分企业微信二维码、个人微信二维码

vue2 实现解析二维码图片/二维码图片链接，区分企业微信二维码、个人微信二维码

企微和个微的区别：
企微二维码解析后会含有 work.weixin

解析二维码图片

1. 首先安装、导入 jsqr 包

   npm i jsqr

   import jsqr from 'jsqr';

2. 页面添加上传文件按钮，以及显示解析图片后的结果显示区域

   <div class="image-box">
     <h4>解析图片：</h4>
     <el-input
       type="file"
       @change="handleFileChange"
       size="mini"
       style="width: 200px;"
     />
   </div>
   <canvas ref="canvas" style="display: none;"></canvas>
   <div v-if="decodedText">
     <p>解析结果: {
       { decodedText }}</p>
   </div>
   

3. 处理上传的图片文件函数

   // 处理文件上传事件
   handleFileChange(event) {
        
   // 获取上传的第一个文件
   const file = event.target.files[0]