最近在做一个教育类的小商城的微信小程序，用到了上传多个图片文件到服务器端，这里做一个讲解，希望对大家有所帮助。
1，小程序端：
在wxml文件中：
PHP;">
删除
上传作业
在js文件中：
= 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中：
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实现微信小程序多图片上传到服务器功能，希望对大家有所帮助。程序员遇到问题都会上（编程之家jb51.cc）查找问题解答方法！如果觉得站点还不错，随手转发给程序员朋友一下！
原文链接：https://www.f2er.com/php/15829.html