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 class="head lazy"  src="/static/imghwm/default1.png"  data-src="login.avatar_url?login.avatar_url: &#39;&#39;"  :
                 
                 :onerror="errImage"
            >
            <img  class="point lazy"  src="/static/imghwm/default1.png"  data-src="../../assets/images/mine/point.png"    alt="HTML5呼叫行動瀏覽器相機問題" >
          </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中文網其他相關文章！