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

 

1. <input class="addPicInput" type="file" ref="uploadFile"

2. @change="fileChange" accept="image/*" multiple>

在移动端页面使用上传文件或者图片时，IOS和安卓的展现方式有很多不一样。

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

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

结果如下：

1. 1. 安卓：

2. 【微信】： 有capture，调相机； 无capture，相册相机一起调

3. 【QQ】： 有captrue，相册相机一起调； 无capture，调相册

4. 【浏览器】：有capture，调相机； 无capture，相册相机一起调

5.  

6. 2. IOS

7. 【微信】： 有capture，调相机； 无capture，相册相机一起调

8. 【QQ】： 有capture，调相机； 无capture，相册相机一起调

9. 【浏览器】：有capture，调相机； 无capture，相册相机一起调

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

而在Android上 QQ表现不一致，于是在实际开发中，我们只需要判断

1. if (isAndroid && type === 'qq') {

2. this.$('capture', 'camera');

3. }

over！