HTML5如何調(diào)用移動(dòng)瀏覽器相機(jī)問(wèn)題

這篇文章將為大家詳細(xì)講解有關(guān)HTML5如何調(diào)用移動(dòng)瀏覽器相機(jī)問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

因?yàn)闉g覽器和微信瀏覽器區(qū)別，導(dǎo)致直接使用capture=”camera”，瀏覽器會(huì)調(diào)用相機(jī)。解決方案，就是在組件加載時(shí)候，判斷一下內(nèi)核

代碼如下

<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})
      }      // 延遲一段事件清除內(nèi)容
      setTimeout(() => { uploadFile.value = '' }, 200)
    }
  },
  data () {   return {
      iswx: false,
      errImage: USER_DEFAULT_BASE64
    }
  }
}</script><style scoped lang="less">
    //TODO 樣式</style>

關(guān)于HTML5如何調(diào)用移動(dòng)瀏覽器相機(jī)問(wèn)題就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。