HTML5调用移动浏览器相机问题

因为浏览器和微信浏览器区别，导致直接使用capture=”camera”，浏览器会调用相机。解决方案，就是在组件加载时候，判断一下内核

代码如下

<template>    <p id="info-container">      <ul class="nav-wrapper">        <li class="head-item">          <p class="item-wrapper">            <p class="left-item">头像</p>            <p class="right-item">              <img :src="login.avatar_url?login.avatar_url: ''"                   class="head"                   :onerror="errImage"              >              <img class="point" src="../../assets/images/mine/point.png">            </p>          </p>          <!--           这是需要样式控制input，让其定位到父集元素顶层，透明度为0          -->          <input type="file"                 accept="image/*"                 ref="uploadFile"                 @change="changeFileHandler"                 capture="camera"                 v-if="iswx"          />          <input type="file"                 accept="image/*"                 ref="uploadFile"                 @change="changeFileHandler"                 v-if="!iswx"          />        </li>      </ul>    </p></template><script>import {    USER_DEFAULT_BASE64,    HEAD_IMAGE_SIZE_TO_BIG  } from '../../utils/Constants'import { mapGetters, mapActions } from 'vuex'export default {    name: 'info-container',    computed: {      ...mapGetters([      'getAuthLogin'      ]),      login () {      return this.$store.getters.getAuthLogin      }    },    created () {    const agent = navigator.userAgent.toLowerCase()    this.iswx = agent.indexOf('qqbrowser') >= 0    },    methods: {      ...mapActions([      'authUpdateAvatarUrl'      ]),      showTextHandler (text = '') {      this.$vux.toast.text(text)      },      changeFileHandler (e) {      const files = e.target.files      const uploadFile = this.$refs.uploadFile      const localFile = files[0]      const fileSize = localFile.size / 1024        const fileName = localFile.name      if (fileSize > 1024 * 3) {        this.showTextHandler(HEAD_IMAGE_SIZE_TO_BIG)        } else {        // 表单文件上传          this.authUpdateAvatarUrl({fileName, localFile})        }      // 延迟一段事件清除内容        setTimeout(() => { uploadFile.value = '' }, 200)      }    },    data () {   return {        iswx: false,        errImage: USER_DEFAULT_BASE64      }    }  }</script><style scoped lang="less">      //TODO 样式</style>

相关推荐：

关于HTML5 调用用户的 照相机、相册 初步整理

H5移动端调用相机/相册

H5调用手机的摄像头拍照上传以及手机相册选取照片

以上就是HTML5调用移动浏览器相机问题的详细内容，更多内容请关注技术你好其它相关文章！