本篇是二维码解码器, 生成二维码教程请看另一篇
https://blog.csdn.net/qq_37816525/article/details/97928960
首先安装 qrcode-decoder
npm install qrcode-reader
然后在组件中
<template>
<div class="module-content">
<!--解析二维码-->
<h1 class="module-head">解析二维码</h1>
<div class="box" id="analytic" style="position: relative;">
<h3>长按二维码解析</h3>
[外链图片转存失败(img-rmp7uDdM-1562141512342)(https://mp.csdn.net/mdeditor/tyfo.png)]
<p class="url-box" id="urlBox"></p>
</div>
<div class="box">
<h3>上传二维码解析</h3>
<div style="position: relative;">
[外链图片转存失败(img-jDL9fkbI-1562141512350)(https://mp.csdn.net/mdeditor/tu.png)]
<input type="file" @change="getUrl('file-url')" name="" id="file" value=""/>
<p class="url-box"></p>
</div>
</div>
</div>
</template>
<script>
import QrcodeDecoder from 'qrcode-decoder';
export default {
name: "qrcode",
methods: {
getUrl(type) {
let elem = document.getElementById('file');
console.log(elem);
let qr = new QrcodeDecoder();
let url = null;
if (type === 'img-url') {
url = elem.src;
} else if (type === 'file-url' && elem.files.length > 0) {
url = this.getObjectURL(elem.files[0]);
}
qr.decodeFromImage(url).then((res) => {
//打印结果为 解析出来的 二维码地址
console.log(res.data);
});
},
getObjectURL(file) {
let 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);
}
return url;
}
}
}
</script>
<style scoped>
body {
margin: 0;
}
.module-content {
min-width: 320px;
max-width: 1000px;
width: 100%;
color: #000;
margin: 0 auto;
padding-left: 10px;
box-sizing: border-box;
}
.module-head {
text-align: center;
font-weight: 500;
margin: 0;
font-size: 30px;
height: 100px;
line-height: 100px;
color: #000;
}
.box h3 {
font-weight: 300;
margin: 0;
font-size: 20px;
height: 60px;
line-height: 60px;
color: #000;
}
.url-box {
height: 30px;
line-height: 30px;
font-size: 14px;
}
#file {
position: absolute;
width: 120px;
height: 120px;
opacity: 0;
top: 0;
left: 0;
overflow: hidden;
z-index: 10;
}
</style>