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

在公司工作是真格愉快，本来我们是做的2b业务（想要知道详细内容，请自行访问我司的官网http://lecloudpay.com），现在我们做的是2c业务（想要知道详细内容，请自行访问我司的产品官网https://photonpay.com/）。

做2c业务最头疼的是什么问题，就是兼容性问题。

本篇主要针对移动端上传图片时，在安卓微信端/支付宝端遇到的问题，以及解决的办法，进行阐述。

这里首先要夸夸我们的测试同学，没有他，不可能发现这些问题，且也不可能做出对应手法。

公司的产品同学非常考虑用户的需求，会针对一些用户的痛点进行一些骚操作。上传一些图片时，考虑到电脑端上传不太方便，因为大部分人的照片都是放置在手机上的。所以就推出了扫一扫二维码，手机上传图片的功能。

逻辑是：手机扫一扫➡️上传成功➡️手机端/电脑端，双端回显图片

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 安卓端 微信 打开网页后，点击input上传图片控件，提示不能唤起任何操作。然鹅同台手机支付宝可以唤起相机、唤起相册——反正啥都可以。

通过查询相关资料，发现是因为input的accept的“问题”

accept是input的一个属性，可以用来限制可以上传的文件后缀。之前这套组件用在PC端的时候，通过书写其中的内容可以直接限制只能上传对应的图片文件内容。

在安卓微信上，因为有这样的限制，所以就不能够唤起——那为什么安卓支付宝可以唤起？为什么苹果微信可以唤起？别问俺，俺也想知道。

解决办法

* 如果你只想针对微信做出处理，可以通过 window.navigator.userAgent 判断

1、如果你只想唤起【文件夹】

accept="" //即置空accept

2、如果你想唤起相机/文件夹

accept="image/*"

——至于对文件的限制处理，可以放到获取文件后进行判断

——因为accept="image/*"在各种移动端上的app内置浏览器上表现良好，所以移动端统一用accept="image/*"了

第二回合 安卓支付宝（UC浏览器）图片createObjectURL回显失败

createObjectURL()可以创建一个指向file或者blob的地址，通过调用此地址即可调用到对应资源。

这样的话，上传图片成功后，没有必要再次下载图片，而是回显本地图片即可。

我的用法是酱婶的——

          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浏览器支持的支付宝内置能力。通过打印地址，我发现url是创建成功了，可是就是没有能够成功显示出来。

——那为什么安卓微信可以回显？为什么苹果支付宝可以回显？别问俺，俺也想知道。

于是用回base64回显办法

        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = (e) => {

          // e.target.result 文件的base64

        }

本文完