Vue 实现扫描二维码功能

安装必要的依赖

需要使用

vue-qrcode-reader

库来实现二维码扫描功能。该库基于

jsqr

和浏览器的

getUserMedia

API。

npm install vue-qrcode-reader

pjxi.com
sharedbk.com

基本实现代码

在 Vue 组件中引入并使用

QrcodeStream

或

QrcodeCapture

组件。

<template>
<div>
  <qrcode-stream @decode="onDecode" @init="onInit" />
  <p v-if="error">{{ error }}</p>
  <p v-if="result">扫描结果: {{ result }}</p>
</div>
</template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
  components: { QrcodeStream },
  data() {
    return {
      result: '',
      error: ''
    }
  },
  methods: {
    onDecode(result) {
      this.result = result
    },
    async onInit(promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = '请授予摄像头访问权限'
        } else if (error.name === 'NotFoundError') {
          this.error = '未找到摄像头设备'
        } else {
          this.error = '未知错误'
        }
      }
    }
  }
}
</script>

处理摄像头权限和错误

@init

事件会返回一个 Promise，用于管理摄像头初始化状态。常见的问题包括用户拒绝授权或设备未找到。

二维码结果处理

@decode

事件会在成功扫描二维码后触发，返回解码后的字符串。可以根据具体需求处理结果，例如跳转页面或显示信息。

移动端适配注意事项

某些移动浏览器可能需要 HTTPS 才能访问摄像头。在开发环境中，可能需要配置本地 HTTPS 或使用 ngrok 等工具进行测试。

样式自定义

可以通过 CSS 自定义扫描框的样式：

.qrcode-stream {
  width: 100%;
  max-;
  margin: 0 auto;
  border: 2px solid #333;
}

替代方案

如果不想使用

vue-qrcode-reader

，可以手动集成

jsqr

：

安装

jsqr

：

npm install jsqr

通过

getUserMedia

获取视频流并处理图像帧。

服务器端解码

对于需要上传图片解码的情况，可以使用

qrcode

npm 包：

npm install qrcode

然后通过文件上传组件获取图片文件并解码：

QRCode.toDataURL(file)
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })