最近在做一個教育類的小商城的微信小程序,用到了上傳多個圖片文件到服務(wù)器端,這里做一個講解,希望對大家有所幫助。
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">點擊上傳作業(yè)/view> /view> !-- 選擇圖片end -->
在js文件中:
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { index: 0, multiIndex: [0, 0], //傳到后臺的課程分類 cname:'', }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ 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, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認(rèn)二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的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, }); //循環(huán)把圖片上傳到服務(wù)器 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 }); }, // 預(yù)覽圖片 previewImg: function (e) { //獲取當(dāng)前圖片的下標(biāo) var index = e.currentTarget.dataset.index; //所有圖片 var imgs = this.data.imgs; wx.previewImage({ //當(dāng)前顯示圖片 current: imgs[index], //所有圖片 urls: imgs }) }, })
2,我們注意到我的wx.request請求中Wx_SaveHomeWork方法是后臺服務(wù)器的接收圖片方法,
后邊我會把這個方法展示出來,
3.tp5后臺controller中:
//存取學(xué)生作業(yè)信息 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){ // 移動到框架應(yīng)用根目錄/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]; } } //把數(shù)據(jù)插入到作業(yè)表中 \db('homework')->insertAll($homework); }
這里說一下,max_id的作用,因為接受的是多張圖片,相當(dāng)于一次性要存儲多條數(shù)據(jù),所以用max_id對id進行自增,存儲到數(shù)據(jù)庫表,cid是我自己數(shù)據(jù)庫邏輯需要用到的變量,可以不用考慮,
4.講解的不夠清楚,因為是自己寫的,感受不到難點在哪里,我自己的難點是在小程序端的圖片上傳,用了for循環(huán),循環(huán)上傳的方法,其他的相對來說,邏輯比較簡單。
總結(jié)
以上所述是小編給大家介紹的tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
標(biāo)簽:成都 山東 泰州 梅州 張家口 巴中 林芝 威海
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能》,本文關(guān)鍵詞 tp5,實現(xiàn),微信,小,程序,多圖,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。