因為瀏覽器和微信瀏覽器區別，導致直接使用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調用移動瀏覽器相機問題的詳細內容，更多請關注php中文網其它相關文章！