<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');
}