最近在做一個(gè)教育類的小商城的微信小程序，用到了上傳多個(gè)圖片文件到服務(wù)器端，這里做一個(gè)講解，希望對大家有所幫助。
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">點(diǎn)擊上傳作業(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)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
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'], // 可以指定來源是相冊還是相機(jī)，默認(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ù)器的接收圖片方法，
后邊我會把這個(gè)方法展示出來，
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){
// 移動(dòng)到框架應(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的作用，因?yàn)榻邮艿氖嵌鄰垐D片，相當(dāng)于一次性要存儲多條數(shù)據(jù)，所以用max_id對id進(jìn)行自增，存儲到數(shù)據(jù)庫表，cid是我自己數(shù)據(jù)庫邏輯需要用到的變量，可以不用考慮，
4.講解的不夠清楚，因?yàn)槭亲约簩懙?，感受不到難點(diǎn)在哪里，我自己的難點(diǎn)是在小程序端的圖片上傳，用了for循環(huán)，循環(huán)上傳的方法，其他的相對來說，邏輯比較簡單。
總結(jié)
以上所述是小編給大家介紹的tp5實(shí)現(xiàn)微信小程序多圖片上傳到服務(wù)器功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- TP5框架實(shí)現(xiàn)上傳多張圖片的方法分析
- tp5框架基于ajax實(shí)現(xiàn)異步刪除圖片的方法示例
- 基于ThinkPHP5.0實(shí)現(xiàn)圖片上傳插件
- ThinkPHP5+Layui實(shí)現(xiàn)圖片上傳加預(yù)覽功能
- ThinkPHP5.0 圖片上傳生成縮略圖實(shí)例代碼說明
- thinkPHP5框架整合plupload實(shí)現(xiàn)圖片批量上傳功能的方法
- thinkphp5上傳圖片及生成縮略圖公共方法(分享)
- thinkPHP5.0框架驗(yàn)證碼調(diào)用及點(diǎn)擊圖片刷新簡單實(shí)現(xiàn)方法
- Thinkphp5+plupload實(shí)現(xiàn)的圖片上傳功能示例【支持實(shí)時(shí)預(yù)覽】
- Thinkphp5框架實(shí)現(xiàn)圖片、音頻和視頻文件的上傳功能詳解
- ThinkPHP5+UEditor圖片上傳到阿里云對象存儲OSS功能示例
- TP5框架實(shí)現(xiàn)一次選擇多張圖片并預(yù)覽的方法示例
