微信小程序多张图片上传组件

在实际开发中，很多时候都需要要上传图片，但是对于上传多张时需要一张张的上传，因为图片都可能比较大，这时就需要我们对上传图片的API进行进一步的处理，这样就解决了我们同时选择上传多张图片需求。所以为了方便以后使用，封装成一个特定的组件分享出来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。

多张图片上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

新建一个uploadImages组件文件，定义组件的样式结构及js文件。

1.页面样式布局

view

css

图片插件这样大概就完成了，不过不是每一个人都是和我一样的情况，使用请具体项目分析。

实例请查看地址： https://github.com/kingbuwu/uploadImages

    实现图片轮播功能且高度要自适应。

    使用小程序自带组件swiper。

     关键点 ：就是要计算出当前图片的高度并赋值给swiper高度。需要计算是由于swiper必须指定高度不能像div一样自动撑开。

    难点：

    1、问题：切换页面返回 由onhide—>onshow时，出现所有的高度会保持在最后计算出的那个值，导致高度自适应效果失效。

         原因：是由于此时imageLoad不再监听。

         解决办法：watch图片列表，给url加参数（时间戳），使其每次都重新加载，使imageLoad监听。

    2、问题：切换到后台再返回到前台时，初始高度会保持出现在第一张图片的高度，若切换时非第一张图片，就会导致给当前图片高度不正确，被遮挡或者有大片空白。

         原因：给swiper赋值的是 图片列表里第一张的高度。

         解决办法：后台切回前台时，appdata是保持不变的，而当前图片排位已被保存变量，所以取当前图片的高度赋值给swiper高度。

    3、问题：此组件所在页面，下面有跳转到当前页的业务需要，只是渲染数据不同。当返回前一个页面时，初始高度还保留着返回前最后一次的高度，与当前页当前图片高度不符。

         原因：同页面切换时，appdata没有重新赋值的话就不会变化，最后当前图片变量取值了最后出现的那个页面的当前图片。

        解决办法：每切换到一个页面时，在图片组件里，缓存以页面数:当前图片为键值的currents对象。返回到某个页面时，通过当前页面数取得当前图片，从而获得当前初始高度。

PS ： 在设计和解决这些难点时，均遵循着组件的高内聚、低耦合原则，使得更具复用性、稳定性、无依赖。

ps：很多时候开始发现是未解的，待解决之后发现原来并没什么，