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！

转载于:https://juejin.im/post/5c131793e51d4517bf65405c