jssdk 关于公众号图片上传的坑

最近碰到一个坑，必须记录一下。以此来发泄一下内心那汹涌澎湃的情绪。一直没更新的博客因此而更新……
本人刚接手小程序和公众号开发，算是小白一枚。要说为什么要接触小程序和公众号开发，是喜欢吗？是爱吗？是责任吗？我想说，why not？ 作为一名前端码农，是很有必要学习小程序和公众号开发的。当然，也是公司最近的项目要用到小程序和公众号，工作的驱动使我更有动力嘛（心虚一下下）
闲话少说，进入正题。
在开发的过程中，有一个功能，是需要用户上传材料的，就是上传图片。要实现的需求也很简单，单击预览，长按删除，就这些。但就是这么简单的需求，却把我坑惨了……

1、图片的长按删除
一开始用的img标签。不管是android还是ios都可以实现预览。虽然ios的不能直接使用chooseImage接口返回的localId当img的src属性。但也提供了一个接口getLocalImgData可以获取到图片的base64，可以用img展示。这个没问题。但是在长按的时候就老是会弹出一个分享给朋友的菜单。就是像下面所显示的那样从底部弹出的一个菜单。

各种百度谷歌，找到的解决方法：
1）、img{ pointer-events: none; }
这个方法牛掰了。他是可以禁止弹出菜单的。看字面意思应该是禁止了img的点击事件，或者说是阻止了img标签成为鼠标事件目标。这个css属性还有其他的一些属性值，这里我不展开。他牛掰在哪里呢？他把我的长按事件也给禁了，果断pass
2）、css：img{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
js： window.addEventListener('contextmenu', function(e){ e.preventDefault(); });
这个方法试过了，没起到作用。虽然他没起到禁止弹出分享给朋友的菜单，但他却可以禁止调另外一个菜单，长按图片的时候，页面会自动选中某些文字，然后弹出“复制，搜一搜”的菜单，至于原因，还没找到。用这个方法中的css属性，倒是把这个问题解决了。（ps：如果没起作用，可以加下权重 !important 或者直接在当前页面的第一个div里面加style样式）
3）、我的解决方法：用background代替img。这里要设置一下两个属性：background-repeat和background-size，设置no-repeat和100%就行。否则的话背景图会放大或重复。
延伸：后期可能还会改回img来显示。删除方法则改成点击X进行删除。即在图片的右上角加一个叉叉，通过点击这个叉叉来删除图片。
2、图片的上传
这里的图片上传并不是前端上传到微信服务器，后台再从微信服务器里面下载。而是前端直接传给后台图片的base64数据。
小程序是没有问题的。小程序的接口wx.getFileSystemManager().readFile可以获取到图片的base64数据。但jssdk是没有这个接口的。当然也提供了另外一个接口：wx.getLocalImgData可以获取图片的base64。这个接口的初衷并不是提供给我们获取图片的base64的而是为了兼容ios不支持localId的问题的，官方文档的说明：

不管他的初衷是什么，总之，这里我们可以通过这个接口获取到图片的base64数据，那么，问题来了
1）、
android直接提交到后台，没报错，但是ios提交的时候后台返回base64解析失败。原因是ios返回的是完整的一个base64，即前面的一串data：什么的都在，但是后台不需要。这个好办，直接去掉就行。
2）、
处理了上面那个问题，嗯，没毛病了，高高兴兴的提交了代码，想着不用加班啦，可以去戳一顿大排档，美滋滋~
万万没想到，生活的魅力就在于你永远不知道下一秒要经历怎样的磨难。
测试一测，出现了一个大bug。公众号这提交申请了，后台发现烂图了（我们是有专门的后台进行审核的）。我的第一反应就是，嗯，肯定是后台的问题，base64转成图片失败了。所以烂图了。不是我的问题，先溜先溜~
好死不死的是公众号和小程序用的是同样的后台接口，为什么小程序可以公众号不行，我陷入了深深的沉思当中……

沉思无果，于是疯狂的百度谷歌，有说返回的base64可能存在空格或换行符，好，我去。但然并卵……
又有说是getlocalImgdata返回的压根不是base64数据，需要对它再进行一次base64转码，好，我转。但然并卵……
经过一段痛苦的挣扎，我决定使出终极大招了–去问后台大佬……。原来是后台没有保存图片，所以拿到的自然是烂图。为什么没保存呢，后台有这么一段逻辑，判断前端传入的文件名有没有后缀，没有则直接提跳过，不保存图片。坑就坑在这儿了。jssdk的chooseImage返回的 localIds是一段临时路径，是没有后缀的 ，像这样的：

而小程序返回的tempFilePaths是一段完整的路径。这就导致了小程序可以公众号不行的奇怪现象。最后这个问题怎么解决呢？前端可以生成一个随机的带后缀的文件名传给后台。后台也可以从前端传入的base64中得到该图片的类型从而生成一个文件名。这个问题最后还是交给了后台去处理了。果然，人生最大的乐趣就是我们永远不知道下一秒会有怎样的美好在等着我们。
溜了溜了~