正常操作，正常分析，大家好，我是D1n910。

在公司工作是真格愉快，本來我們是做的2b業(yè)務（想要知道詳細內(nèi)容，請自行訪問我司的官網(wǎng)http://lecloudpay.com），現(xiàn)在我們做的是2c業(yè)務（想要知道詳細內(nèi)容，請自行訪問我司的產(chǎn)品官網(wǎng)https://photonpay.com/）。

做2c業(yè)務最頭疼的是什么問題，就是兼容性問題。

本篇主要針對移動端上傳圖片時，在安卓微信端/支付寶端遇到的問題，以及解決的辦法，進行闡述。

這里首先要夸夸我們的測試同學，沒有他，不可能發(fā)現(xiàn)這些問題，且也不可能做出對應手法。

公司的產(chǎn)品同學非常考慮用戶的需求，會針對一些用戶的痛點進行一些騷操作。上傳一些圖片時，考慮到電腦端上傳不太方便，因為大部分人的照片都是放置在手機上的。所以就推出了掃一掃二維碼，手機上傳圖片的功能。

邏輯是：手機掃一掃??上傳成功??手機端/電腦端，雙端回顯圖片

Up主使用的設備是

PC：MacBook Pro (Retina, 13-inch, Early 2015)?

PC瀏覽器：Chrome?版本 75.0.3770.142（正式版本） （64 位）

手機端：iPhone XR

手機端瀏覽器：Chrome 版本?75.0.337.0.103 【IOS】

手機端微信版本：Version 7.0.5 【IOS】

實測一點問題都沒有——然鵝只是我自己用的設備如此。

第一回合 微信 input 上傳圖片控件 不能喚起任何操作 不能喚起照相機 不能喚起相冊

提交測試以后測試就提Bug了——?oppo r11s?安卓端 微信 打開網(wǎng)頁后，點擊input上傳圖片控件，提示不能喚起任何操作。然鵝同臺手機支付寶可以喚起相機、喚起相冊——反正啥都可以。

通過查詢相關(guān)資料，發(fā)現(xiàn)是因為input的accept的“問題”

accept是input的一個屬性，可以用來限制可以上傳的文件后綴。之前這套組件用在PC端的時候，通過書寫其中的內(nèi)容可以直接限制只能上傳對應的圖片文件內(nèi)容。

在安卓微信上，因為有這樣的限制，所以就不能夠喚起——那為什么安卓支付寶可以喚起？為什么蘋果微信可以喚起？別問俺，俺也想知道。

解決辦法

* 如果你只想針對微信做出處理，可以通過?window.navigator.userAgent?判斷

1、如果你只想喚起【文件夾】

accept="" //即置空accept

2、如果你想喚起相機/文件夾

accept="image/*"

——至于對文件的限制處理，可以放到獲取文件后進行判斷

——因為accept="image/*"在各種移動端上的app內(nèi)置瀏覽器上表現(xiàn)良好，所以移動端統(tǒng)一用accept="image/*"了

第二回合?安卓支付寶（UC瀏覽器）圖片createObjectURL回顯失敗

createObjectURL()可以創(chuàng)建一個指向file或者blob的地址，通過調(diào)用此地址即可調(diào)用到對應資源。

這樣的話，上傳圖片成功后，沒有必要再次下載圖片，而是回顯本地圖片即可。

我的用法是醬嬸的——

??????????let url = null

??????????if (window.createObjectURL !== undefined) {

????????????url = window.createObjectURL(file)

??????????} else if (window.URL !== undefined) {

????????????url = window.URL.createObjectURL(file)

??????????} else if (window.webkitURL !== undefined) {

????????????url = window.webkitURL.createObjectURL(file)

??????????}

然鵝，安卓端支付寶上本地圖片回顯失敗，顯示圖片裂了，下拉一看，是UC瀏覽器支持的支付寶內(nèi)置能力。通過打印地址，我發(fā)現(xiàn)url是創(chuàng)建成功了，可是就是沒有能夠成功顯示出來。

——那為什么安卓微信可以回顯？為什么蘋果支付寶可以回顯？別問俺，俺也想知道。

于是用回base64回顯辦法

????????const reader = new FileReader()

????????reader.readAsDataURL(file)

????????reader.onload = (e) => {

? ? ? ? ? //?e.target.result 文件的base64

????????}

本文完