使用QrCode识别二维码
1、引入QrCode
import QrCode from 'qrcode-decoder'
2、HTML
使用el-upload上传图片
<el-form-item
label="设备识别码"
prop="deviceSerialNo"
class="position:relative"
>
<dataInput
v-if="qrFlag"
v-model.trim="form.deviceSerialNo"
:placeholder="$t('lang.pleaseInput')"
:clearable="false"
maxlength="32"
/>
<el-upload
ref="uploadQr"
action=""
:show-file-list="false"
:http-request="successFnQr"
class="img-upload"
>
<img
:src="require('@/modules/authMng/assets/scaner.png')"
alt=""
style="vertical-align: middle;"
>
</el-upload>
<canvas
id="myCanvas"
width="600"
height="600"
style="display: none"
/>
</el-form-item>
3、javascript
data(){
return {
fileListQr: [],
qrFlag: true
}
},
methods: {
getQrUrl (file) {
// 获取临时路径
const url = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file) || window.mozURL.createObjectURL(file)
const qr = new QrCode()
return qr.decodeFromImage(url) // 解析二维码,返回promise
},
successFnQr (event) {
const result = this.getQrUrl(event.file)
result.then(res => {
if (res.data) {
this.form.deviceSerialNo = res.data
this.qrFlag = false
this.$nextTick(() => { // 更新页面
this.qrFlag = true
})
this.success('识别二维码成功!')
} else {
this.error('识别二维码失败,请重新上传')
}
}).catch(err => {
this.error(JSON.stringify(err))
})
}
4 、css
.img-upload {
position: absolute;
height: 30px;
width: 30px;
margin-top: -30px;
margin-left: 94%;
cursor: pointer;
}
5 、效果图