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: &#39;&#39;"
                 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 &#39;../../utils/Constants&#39;import { mapGetters, mapActions } from &#39;vuex&#39;export default {
  name: &#39;info-container&#39;,
  computed: {
    ...mapGetters([      &#39;getAuthLogin&#39;
    ]),
    login () {      return this.$store.getters.getAuthLogin
    }
  },
  created () {    const agent = navigator.userAgent.toLowerCase()    this.iswx = agent.indexOf(&#39;qqbrowser&#39;) >= 0
  },
  methods: {
    ...mapActions([      &#39;authUpdateAvatarUrl&#39;
    ]),
    showTextHandler (text = &#39;&#39;) {      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 = &#39;&#39; }, 200)
    }
  },
  data () {   return {
      iswx: false,
      errImage: USER_DEFAULT_BASE64
    }
  }
}</script><style scoped lang="less">
    //TODO 样式</style>

      

相关推荐：

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

H5移动端调用相机/相册

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

以上是HTML5调用移动浏览器相机问题的详细内容。更多信息请关注PHP中文网其他相关文章！