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

2023年5月2日 196次阅读 来源: biu_羊 
<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！

    原文作者：biu_羊
    原文地址: https://segmentfault.com/a/1190000017370487
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞