H5(移動端)前端使用input type=file 上傳圖片,調用相機和相冊

<input class="addPicInput" type="file" ref="uploadFile"
       @change="fileChange" accept="image/*" multiple>

在移動端頁面使用上傳文件或者圖片時,IOS和安卓的展示方式有不少不同。瀏覽器

inputcaptrure屬性,取值:camera:相機;camcorder:攝像;microphone:錄音微信

在安卓想要調用相機須要添加capture屬性,因而我在IOSAndroid上進行了三端測試!測試

結果以下:this

1. 安卓: 
【微信】:  有capture,調相機;         無capture,相冊相機一塊兒調
【QQ】:    有captrue,相冊相機一塊兒調; 無capture,調相冊
【瀏覽器】:有capture,調相機;         無capture,相冊相機一塊兒調

2. IOS
【微信】:  有capture,調相機;  無capture,相冊相機一塊兒調
【QQ】:    有capture,調相機;  無capture,相冊相機一塊兒調
【瀏覽器】:有capture,調相機;  無capture,相冊相機一塊兒調

咱們能夠看見,IOS表現行爲一致,只要不加capture就可正常使用code

而在AndroidQQ表現不一致,因而在實際開發中,咱們只須要判斷圖片

if (isAndroid && type === 'qq') {
    this.$refs.uploadFile.setAttribute('capture', 'camera');
}

over!ip

相關文章
相關標籤/搜索