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');
}
複製代碼

over！