vue3 app项目调用扫码功能，能扫码能本地图片上传

实现步骤

1. 安装 html5-qrcode 库

npm install html5-qrcode

2. 组件实现
   假设我们用 html5-qrcode 这个库来实现扫码，下面是一个基本的实现示例。

vue

<template>
  <div>
    <!-- 显示扫码区域 -->
    <div id="reader" style="width: 300px; height: 300px;"></div>

    <!-- 上传本地图片进行扫码 -->
    <input type="file" @change="handleFileUpload" accept="image/*" />

    <!-- 扫码后显示的详情信息 -->
    <div v-if="scanResult">
      <h3>扫描结果:</h3>
      <p>ID: {{ scanResult.id }}</p>
      <p>详情: {{ scanResult.details }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Html5QrcodeScanner } from 'html5-qrcode';

export default {
  data() {
    return {
      scanner: null,
      scanResult: null, // 用于存储扫码后的结果
    };
  },
  mounted() {
    // 初始化扫码器
    this.startScanner();
  },
  beforeDestroy() {
    // 组件销毁时停止扫码
    if (this.scanner) {
      this.scanner.clear();
    }
  },
  methods: {
    // 启动扫码器
    startScanner() {
      this.scanner = new Html5QrcodeScanner("reader", {
        fps: 10, // 设置每秒帧数
        qrbox: 250, // 设置扫码框的大小
      });
      this.scanner.render(this.onScanSuccess, this.onScanError);
    },

    // 扫描成功时的回调
    onScanSuccess(decodedText, decodedResult) {
      console.log("扫码结果:", decodedText);
      // 假设扫码返回的是 ID，根据 ID 调用接口获取详情
      this.fetchDetails(decodedText); // 获取详情
    },

    // 扫描失败时的回调
    onScanError(errorMessage) {
      console.error("扫描失败:", errorMessage);
    },

    // 处理上传图片并扫描
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = () => {
          const imageDataUrl = reader.result;
          // 解析图片二维码
          this.scanFromImage(imageDataUrl);
        };
        reader.readAsDataURL(file);
      }
    },

    // 从上传的图片扫描二维码
    scanFromImage(imageDataUrl) {
      const qrCode = new Html5Qrcode();
      qrCode.decodeFromUrl(imageDataUrl)
        .then(decodedText => {
          console.log("扫描到的ID:", decodedText);
          this.fetchDetails(decodedText); // 获取详情
        })
        .catch(error => {
          console.error("扫码失败:", error);
        });
    },

    // 根据扫描到的 ID 调用接口获取详情
    async fetchDetails(id) {
      try {
        const response = await fetch(`https://api.example.com/details/${id}`);
        const data = await response.json();
        this.scanResult = {
          id: data.id,
          details: data.details,
        };
      } catch (error) {
        console.error("获取详情失败:", error);
      }
    },
  },
};
</script>

<style scoped>
#reader {
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
</style>

说明：

扫码区域 (#reader)：这是二维码扫描器显示的区域，使用 html5-qrcode 库来初始化二维码扫描器并开始扫码。

本地图片上传：通过 上传本地图片，选择图片后通过 FileReader 读取图片内容，再调用 scanFromImage 方法进行二维码解析。

扫码成功回调 (onScanSuccess)：扫码成功后，获取扫描到的 ID，并调用 fetchDetails 方法从服务器获取详细信息。

API 调用 (fetchDetails)：根据扫描到的 ID 调用一个 API，获取对应的详情信息。这个接口返回的数据会存储在 scanResult 中，并在页面上展示。

总结：

可以用 html5-qrcode 来实现扫码功能，它支持从摄像头扫描和图片扫描两种方式。
扫描成功后，不会跳转页面，而是更新当前页面的内容（通过 Vue 的数据绑定）。
可以根据扫描到的 ID 去调用接口，获取并展示相应的详细信息。