H5上传照片调用相册和拍照（解决android和ios系统的兼容问题）

今天用input file 上传照片调用相册拍照的时候碰到了相册和拍照不能同时实现的问题，查找了网上的一些方法，解决了ios的问：ios下不加capture="camera",如果是安卓的话就加capture="camera"，具体代码及兼容如下。

html:

<input type="file" name="file" class="upload-file" @change="fileChange" ref="frontFile" accept="image/*"  capture="camera"/>

js:

//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);

if (isIos) {
  var files = document.querySelectorAll("input[type=file]");
  if(files) {
    files.forEach(item => {
      item.removeAttribute("capture")
    })
  }
}

乍一看还挺完美，但是当测试同学拿着众多型号的安卓机一测，这个“完美的方案”立马被啪啪打脸 -- 有的安卓机直接调用了相机，没有相册可选！！又是网上的一通搜索最后还请教了几个移动端经验比较丰富的同事，都没遇到过这个问题，最后只能自己硬着头皮了。
找测试同学拿了测试机子nova3、华为p10 和华为p30，发现华为p10加capture="camera"可以同时调用相册和相机，而两外两台机子刚好相反，接着分别打印他们的浏览器信息navigator.userAgent.toLowerCase()

从这些信息中，发现nova3和p30有一个共同的参数mqqbrowser,而p10没有。根据我中学英语的水平，nova3和p30可能是用了qq浏览器，可以以此做突破口给它们做个区分。
幸好运气不错，其他众多安卓机子经过测试也兼容了，万幸万幸。最后贴上完整的js：

//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);

// var isWeixin = ua.match(/MicroMessenger/i)=="micromessenger";//微信判断
// var isQQInstalled = ua.indexOf(' qq')>-1 && ua.indexOf('mqqbrowser') < 0;//qq内置浏览器
var isQQ = ua.indexOf('mqqbrowser')> -1 && ua.indexOf(" qq")< 0;//qq浏览器

if (isQQ || isIos) {
  var files = document.querySelectorAll("input[type=file]");
  if(files) {
    files.forEach(item => {
      item.removeAttribute("capture")
    })
  }
}