微信小程序实现一次上传多张照片

微信⼩程序实现⼀次上传多张照⽚
⼀.由于公司项⽬需要开发微信⼩程序⽤来对接之前已经完成WEB项⽬，所以接下了微信⼩程序开发，之前的⼀直做后台开发的~好吧临危受命。

不过现在的前端框架也是很有意思。

研究起来倒也不乏味。

现在的VUE前端框架确实很优秀，配合Vant 以及Element 这些组件库开发，都是很优秀组合。

为啥说着个呢，其实都是为了微信⼩程序上传照⽚实现⼀次提交多张照⽚的问题。

也是有点较劲，结果东西越试越多。

~ 随⼝扯两句，否则博客太空旷。

~回归正题
1.微信⼩程序上传模块分析
⽬前微信⼩程序还是挺强的挺好⽤的，提供了微信⼩程序⾃⼰的组件。

直接API下载放到⼩程序，引⼊就可以。

挺优秀。

（1）微信⼩程序组件
（2）插件问题所在
wx.chooseImage：从本地相册选择图⽚或使⽤相机拍照，获取图⽚上传的⽂件夹路径，以及设置获取上传照⽚最⼤张数（9张），和图⽚尺⼨等。

tempFilePaths Array. 图⽚的本地临时⽂件路径列表 (本地路径) 这是获取到图⽚路径的返回参数类型，是字符串数组
请看下⾯：
这是chooseImage 和 uplodFile 组合搭配完成的上传图⽚ chooseImage预选图⽚，uploadFile上传图⽚到后台。

问题所在uploadFile ⾥⾯的⼀个属性参数 filePath: xxx[0] 他的参数类型只能是String.所以⽹上⼤部分的多张照⽚上传都是 for循环UplodFile 或者递归来完成多张照⽚上传，但后台仔细看都是重复多次访问后台
⼆.我的解决思路
1.最好的办法就是⽤其他的组件来做这块,
（1）Vant组件的⽅法和微信⼩程序的uploadFile 属性参数是⼀样的，所以他是不⾏了
（2）VUE 和 element 组件⽤node.js可以实现（但是我不会VUE ~尴尬。

）
（3）kbone 微信⼩程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到⼩程序环境内执⾏是不可能的。

kbone 的诞⽣就是为了解决这个问题，它实现了⼀个适配器，在适配层⾥模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运⾏在⼩程序⾥。

这有点复杂了，我不会~不过有技术的vue应该也能放进去。

2.最后我的解决办法转Base64码以数组传值到后台实现⼀次提交多张照⽚的需求
直接上代码：
这⾥是chooseImage 获取图⽚，以及图⽚转为Base64码的部分
这⾥是提交按钮触发是事件部分
这⾥是demo后台测试获取图⽚的部分(这⾥有个⼤神写的⼯具类，把Base64码转为MultipartFile的类型)。