vue + element 上传组件 解析二维码

npm 下载 jsqr 库
npm install jsqr – save

<!-- 创建一个canvas标签-->
<canvas id="myCanvas" width="600" height="600" style="display: none"></canvas>

//引入jsqr 库
  import jsqr from 'jsqr';
  data(){ 
  	return{ 
  		isqrcode: false,//显示提醒文字
  		qrcode: '' //二维码
  	}
  }
// 解析二维码
      analysisQrcode(file){ 
        return new Promise((resolve)=>{ 
          var img = new Image();
          var reader = new FileReader()
          reader.readAsDataURL(file);
          reader.onload = function(e) { 
            img.src = e.target.result;
            var myCanvas = document.getElementById('myCanvas');
            var myCanvaswd = myCanvas.getContext('2d');
            img.onload = function () { 
              myCanvaswd.drawImage(img, 0, 0, 600, 600);
              var imageData = myCanvaswd.getImageData(0, 0, 600, 600);
              let data = { 
                qrcode: '',
                isqrcode: true
              }
              data.qrcode = jsqr(imageData.data, imageData.width, imageData.height, { 
                inversionAttempts: "dontInvert",
              });
              if (data.qrcode == null){ 
                data.isqrcode = false
              }
              resolve(data)
            }
          }
        })
      },
//上传成功前的回调
     async beforeAvatarUpload(file) { 
      	let data = await this.analysisQrcode(file)
      	console.log(data)
      }