Vue3中input type=file无法识别二维码，有哪些替代方案？

问题根源 #

你用<input type="file" capture="environment">唤起的是系统的「文件拍摄/选择」界面，这个模式下系统会屏蔽自带的扫码功能——它的设计目标是让用户获取图片文件，而非完成扫码操作，这就是手动打开相机能扫码、但通过input唤起不行的核心原因。

可行方案 #

方案1：使用原生BarcodeDetector API（推荐） #

现代移动端浏览器（Chrome 83+、Safari 16.4+）支持这个原生Web API，可直接访问后置摄像头并实时识别二维码，完全在网页内完成操作，无需依赖系统相机的扫码功能，体验流畅且符合标准。

代码示例：

// 先检查浏览器兼容性
if ('BarcodeDetector' in window) {
  // 初始化二维码检测器
  const barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] });
  
  // 绑定扫码按钮点击事件
  document.getElementById('syncBtn').addEventListener('click', async () => {
    try {
      // 请求访问后置摄像头
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: 'environment' }
      });
      
      // 创建视频元素承载相机流
      const video = document.createElement('video');
      video.srcObject = stream;
      video.play();
      
      // 循环检测二维码
      const detectQr = async () => {
        try {
          const barcodes = await barcodeDetector.detect(video);
          if (barcodes.length > 0) {
            const qrContent = barcodes[0].rawValue;
            // 拿到二维码内容后执行同步逻辑
            console.log('同步链接:', qrContent);
            
            // 停止相机流并清理元素
            stream.getTracks().forEach(track => track.stop());
            video.remove();
            
            // 这里添加你的桌面端-移动端同步代码
          }
          requestAnimationFrame(detectQr);
        } catch (err) {
          console.error('二维码检测失败:', err);
        }
      };
      
      detectQr();
    } catch (err) {
      console.error('无法访问相机:', err);
      alert('请允许浏览器访问相机权限');
    }
  });
} else {
  alert('当前浏览器不支持原生扫码，请升级浏览器或使用其他方式');
}

方案2：拍摄照片后用现有扫码器解析 #

如果你坚持要用input唤起相机，可以让用户拍摄二维码照片后，用你已实现的扫码器解析图片内容，适合兼容旧浏览器场景。

代码示例：

<!-- 隐藏input元素，用按钮触发 -->
<input type="file" id="cameraInput" accept="image/*" capture="environment" style="display: none;">
<button id="syncBtn">扫码同步</button>

<script>
document.getElementById('syncBtn').addEventListener('click', () => {
  document.getElementById('cameraInput').click();
});

// 处理照片选择事件
document.getElementById('cameraInput').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  // 将文件转为可识别的图片对象
  const img = new Image();
  img.src = URL.createObjectURL(file);
  
  img.onload = async () => {
    // 调用你已实现的扫码器解析图片
    const qrResult = await yourExistingQrScanner.scan(img); // 替换为你的扫码方法
    
    if (qrResult) {
      console.log('同步链接:', qrResult);
      // 执行同步逻辑
      URL.revokeObjectURL(img.src); // 清理临时URL
    } else {
      alert('未识别到二维码，请重新拍摄');
    }
  };
});
</script>

方案3：唤起系统扫码工具（兼容性有限） #

部分移动端浏览器支持通过URL Scheme唤起系统自带扫码工具，但不同系统/浏览器实现差异大，仅作为补充方案：

• iOS Safari：可尝试跳转https://scan.apple.com/（需iOS 11+，且用户设备支持）
• Android Chrome：可使用Intent唤起系统扫码（如intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end，需系统支持或安装ZXing扫码APP）

这种方法依赖外部环境，稳定性不如前两种方案。

内容的提问来源于stack exchange，提问作者Andrei Zamfira