H5(移动端)前端使用input type=file 上传图片，调用相机和相册

<input class="addPicInput" type="file" ref="uploadFile"
       @change="fileChange" accept="image/*" multiple>
复制代码

在移动端页面使用上传文件或者图片时，IOS和安卓的展示方式有不少不同。

input 有 captrure属性，取值：camera：相机；camcorder：摄像；microphone：录音

在安卓想要调用相机须要添加capture属性，因而我在IOS和Android上进行了三端测试!

结果以下：

1. 安卓： 
【微信】：  有capture，调相机；         无capture，相册相机一块儿调
【QQ】：    有captrue，相册相机一块儿调； 无capture，调相册
【浏览器】：有capture，调相机；         无capture，相册相机一块儿调

2. IOS
【微信】：  有capture，调相机；  无capture，相册相机一块儿调
【QQ】：    有capture，调相机；  无capture，相册相机一块儿调
【浏览器】：有capture，调相机；  无capture，相册相机一块儿调

复制代码

咱们能够看见，IOS表现行为一致，只要不加capture就可正常使用

而在Android上 QQ表现不一致，因而在实际开发中，咱们只须要判断

if (isAndroid && type === 'qq') {
    this.$refs.uploadFile.setAttribute('capture', 'camera');
}
复制代码

over！