因为浏览器和微信浏览器区别，导致直接使用capture=”camera”，浏览器会调用相机。解决方案，就是在组件加载时候，判断一下内核

代码如下

<template>
  <p>
    </p>
<ul>
      <li>
        <p>
          </p>
<p>头像</p>
          <p>
            @@##@@
            @@##@@
          </p>
        
        <!-- 
        这是需要样式控制input，让其定位到父集元素顶层，透明度为0
        -->
        <input>
        <input>
      </li>
    </ul>
  </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>
    //TODO 样式</style>

      

相关推荐：

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

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

H5移动端调用相机/相册

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！