您现在的位置: Gufang > 博客 > 学无止境 > 正文
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');
}
发表评论(0)
姓名 *
电子邮件
QQ
评论内容 *
验证问题 * 江苏省的省会是哪个城市?请填写正确答案
验证码 * 图片看不清?点击重新得到验证码