Problème de caméra du navigateur mobile appelant HTML5

En raison de la différence entre le navigateur et le navigateur WeChat, si vous utilisez directement capture="camera", le navigateur appellera la caméra. La solution est de vérifier le noyau lors du chargement du composant

À propos de l'arrangement préliminaire de l'appel de l'appareil photo et de l'album photo de l'utilisateur en HTML5

<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>

Terminal mobile H5 appelant l'appareil photo/album photo

H5 appelle l'appareil photo du téléphone pour prendre des photos, les télécharger et sélectionner l'album téléphonique

pour prendre des photos

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!