elementUI 上传解析二维码

1.安装

npm install qrcode-decoder

2.elementUI上传插件

<template>
  <el-upload
    action=""
    :show-file-list="false"
    :http-request="resolveQR"
  >
    <el-button
      type="success"
    >上传</el-button>
  </el-upload>
</template>

3.js部分

methods: {
      resolveQR(event) {
        const url = window.webkitURL.createObjectURL(event.file);
        const qr = new QrCode();
        const result = qr.decodeFromImage(url);
        result
          .then(res => {
            if (res.data) {
              console.log(res.data);//得到解析出来的字符串
              this.$message.success("识别二维码成功!");
            } else {
              //console.log(res);
              this.$message.error("识别二维码失败, 请重新上传");
            }
          })
          .catch(err => {
            this.$message.error(JSON.stringify(err));
          });
      }
  }