-
阐述之前先哭一会，这次功能硬控了四天时间，我尽量哭的很小声呜呜呜呜呜呜... 好了～这是我潜伏掘金好几年来第一次写文章，给自己一点鼓励，之前是太过懒惰了然后也是太在意别人的眼光了终于克服了自己，踏出第一步了！
-
本人做前端今年马上第五个年头了，但是依旧是一个前端小菜🥬 所以接下来的文章，有任何不对之处欢迎指正，谢谢🙏
-
是这样的本次接到的需求是在h5页面做一个上传功能，最多上传5张。每张图片限制（5M），超过弹窗提示【图片太大了】，格式支持 png、jpg、jpeg、点击图片可放大，可左右滑动浏览。点击右上角X可删除。听起来是不是一个非常正常的上传需求，是的当时我也是这样感觉的。
-
但是前端负责人希望我用微信JSSDK做上传图片，集成部分就不赘述了。具体就是使用微信自己提供的api开发，因为涉及到签名和source所以wx.chooseImage等方法就放在公共方法里，以便授权和使用
接下来开赌吧00----------------------------------------------------------
- 如图这是我画的交互图
点击照相机的位置就可以触发上传了wx.chooseImage(),本来是有一个流程的 我拿chooseImage获取到localIds，用localIds递归的方式调用wx.uploadImage(),会返回serverIds,然后在这个时刻我调用后端的接口，把serverIds这个给后端，然后后端也是先上传然后在下载才可以，这个过程很麻烦，后端也一直在吐槽，但是感觉比较正规就硬着头皮继续写了
写了半天，突然发现咦后端是异步上传，我花费时间上传后端花费时间下载，也不会当时就把路径给我，那这个时间会很长，那么我的临时图片怎么展示呢，我没有路径啊，于是乎我又找到了wx.getLocalImgData();这个方法是获取图片的base64地址的我可以用这个去展示图片，然后开始第一坑！
但是但是这样做太慢了，产品开始吐槽了，我试了一下，获取一张本地图片要1s,然后用loaclId换取serverId居然要耗时将近3s,5张图片的话就是十来秒，妈呀，产品说这样不行，然后后端说别用微信的上传的吧，你直接上传到咱们的服务器吧就跟平时那样正常上传，然后直接用后端返回的路径展示，好吧 开始一番改造，果然丝滑多了，就是多了一步需要把base64转化成file给后端，微信不提供...
好了上传的事情解决了，紧接着开始优化，满足图片格式限制，在ios测试了半天那去安卓试试吧，吧唧打脸，图片没展示，一打印才发现第二坑！
- 安卓机返回的base64没有前缀wx.getLocalImgData 会返回本地图的base64,安卓和苹果得到的base64字符串有所不同
安卓是xxxxxxx
ios是data:image/jgp;base64, xxxx 在网上一翻资料还真是我看网上是这样兼容的
- 还有就是安卓机不能使用微信自带的wx.previewImage()我用的小米手机试的，一点图片直接就跳出整个网页了，绝了，然后换了一种展示方法用vant的ImagePreview查看预览发现完美解决
紧接着，判断大小因为微信不提供大小，所以还是要自己通过base64去换算图片大小，第三坑！发现emmmmm,怎么回事我在手机看到图片是211kb,但是我获取base的图片大小愣是小了一倍，不过我打印的是M，获得的结果是0.105535507202148，211kb/1024我用计算机算的大概是0.20605469
681行就是我打印出来的结果，就是base转换过来的大小有误差，感觉是微信给压缩了，只是猜测，这个最后也没有解决好，测试也没有依据，但是确实也能展示图片，产品说要不就不限制了哈哈，业务没有太大图片的需求，所以这个问题没有很好的解决，路过的友友如果有好的建议和帮助，欢迎交流！！
其实，在网上查了很多，有人开发h5就可以直接用原生那种方式开发了，使用wx自带的是希望能兼容各种手机，自己开发可能又要处理各种手机适配了，但是我又不得不吐槽的是，使用微信的方法遵嘟很麻烦很麻烦啊啊啊，调试十分耗时，必须要到真机才能调试，开发者工具用不了一点因为 返回的是测试虚拟数据，时间也紧急，于是就没有替换还是采用当前的方式，产品好说话哈哈😄
您好，我是快快，那就这样吧，期待下次见～👋
