最近在做一個教育類的小商城的微信小程序，用到了上傳多個圖片文件到服務器端，這里做一個講解，希望對大家有所幫助。
1，小程序端：
在wxml文件中：
<!--選擇圖片 --><view class="picture"><view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><image class='imgSelected' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image><view class="delete-btn" data-index="{{index}}" catchtap="deleteImg">刪除</view></view><view class="clickImg" bindtap="chooseImg">點擊上傳作業</view></view><!-- 選擇圖片end -->在js文件中：
Page({/** * 頁面的初始數據*/data: { index: 0, multiIndex: [0, 0],//傳到后臺的課程分類cname:'', },/** * 生命周期函數--監聽頁面加載*/onLoad: function (options) { },/** * * 生命周期函數--監聽頁面初次渲染完成*/onReady: function () { },/** * 生命周期函數--監聽頁面顯示*/onShow: function () { },/** * 生命周期函數--監聽頁面隱藏*/onHide: function () { },/** * 生命周期函數--監聽頁面卸載*/onUnload: function () { },/** * 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () { },/** * 頁面上拉觸底事件的處理函數*/onReachBottom: function () { },/** * 用戶點擊右上角分享*/onShareAppMessage: function () { },// 上傳圖片操作// 上傳圖片chooseImg: function (e) {var that = this;if(that.data.cname==''){ }else{var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({ lenMore: 1 }); setTimeout(function () { that.setData({ lenMore: 0 }); }, 2500);return false; } wx.chooseImage({// count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有success: function (res) {// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;// console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) { that.setData({ imgs: imgs });return false; } else { imgs.push(tempFilePaths[i]); } }// console.log(imgs); that.setData({ imgs: imgs, });//循環把圖片上傳到服務器for (var i = 0; i < imgs.length; i++) { wx.uploadFile({ url: url + 'Wx_SaveHomeWork', filePath: imgs[i], name: 'files', formData: { cname: that.data.cname }, success: function (res) { console.log(res) } }) } } }); } },// 刪除圖片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index; imgs.splice(index, 1);this.setData({ imgs: imgs }); },// 預覽圖片previewImg: function (e) {//獲取當前圖片的下標var index = e.currentTarget.dataset.index;//所有圖片var imgs = this.data.imgs; wx.previewImage({//當前顯示圖片current: imgs[index],//所有圖片urls: imgs }) },})2，我們注意到我的wx.request請求中Wx_SaveHomeWork方法是后臺服務器的接收圖片方法，
后邊我會把這個方法展示出來，
3.tp5后臺controller中：
//存取學生作業信息 public function Wx_SaveHomeWork(){ $files=/request()->file('files'); $cname=/request()->param('cname'); $cid=Db::name('course')->where('cname',$cname)->value('id'); $max_id=Db::name('homework')->max('id'); foreach($files as $item){// 移動到框架應用根目錄/public/uploads/ 目錄下 $info = $files->rule('date')->move(ROOT_PATH . 'public' . DS . 'uploads'); if($info){ $saveName=str_replace("//","/",$info->getSaveName()); $img='/uploads/'.$saveName; $homework[]=['id'=>$max_id+1,'img'=>$img,'cid'=>$cid]; } } //把數據插入到作業表中 /db('homework')->insertAll($homework); }這里說一下，max_id的作用，因為接受的是多張圖片，相當于一次性要存儲多條數據，所以用max_id對id進行自增，存儲到數據庫表，cid是我自己數據庫邏輯需要用到的變量，可以不用考慮，
4.講解的不夠清楚，因為是自己寫的，感受不到難點在哪里，我自己的難點是在小程序端的圖片上傳，用了for循環，循環上傳的方法，其他的相對來說，邏輯比較簡單。
總結
以上所述是小編給大家介紹的tp5實現微信小程序多圖片上傳到服務器功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
圖片精選
