微信小程序實現一次上傳多張照片

一.由於公司項目需要開發微信小程序用來對接之前已經完成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的類型)

~~如果有不恰當的地方大佬多多指點
[百度雲：](鏈接：https://pan.baidu.com/s/1AYFoZe_dGtLNjAqnyvMXxQ
提取碼：2u9i)