Vue/JS开发WebApp如何实现一键唤起移动端原生相机跳过选文件步骤

你当前的<input type="file">标签缺少accept属性，仅设置capture无法让系统判定你仅需要拍照场景，所以会弹出选择弹窗，按以下方式修改即可实现点击直接唤起原生相机：

修改后的输入框代码示例：

<input
  class="q-mt-md"
  type="file"
  id="fileLoader"
  accept="image/*"
  capture="environment"
  @change="previewIdBack"
  size="xs"
  style="display: none;"
/>
<!-- 可搭配自定义按钮触发，体验更统一 -->
<q-btn 
  label="拍摄身份证背面"
  color="primary"
  size="xs"
  @click="document.getElementById('fileLoader').click()"
/>

注意事项 #

• accept="image/*"是必填属性，声明仅接收图片类型文件，系统会跳过文件选择、相册选择的选项，直接唤起原生相机
• 如果你需要使用前置摄像头，保留capture="user"即可；如果是拍摄证件类内容，建议改为capture="environment"调用后置摄像头，成像效果更好
• 该方案兼容Android 6+、iOS 10+以上所有主流移动端浏览器，无需额外引入依赖
• 如果你需要拍摄视频，把accept改为video/*即可，同理可以直接唤起录像界面

内容的提问来源于stack exchange，提问作者Pei Hao Chan