tp5实现微信小程序多图片上传到服务器功能

2023-09-10 06:33:05 186

最近在做一个教育类的小商城的微信小程序，用到了上传多个图片文件到服务器端，这里做一个讲解，希望对大家有所帮助。

1，小程序端：

在wxml文件中：





删除

点击上传作业

在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){
varthat=this;
if(that.data.cname==''){
}else{
varimgs=this.data.imgs;
if(imgs.length>=9){
this.setData({
lenMore:1
});
setTimeout(function(){
that.setData({
lenMore:0
});
},2500);
returnfalse;
}
wx.chooseImage({
//count:1,//默认9
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
vartempFilePaths=res.tempFilePaths;
varimgs=that.data.imgs;
//console.log(tempFilePaths+'----');
for(vari=0;i=9){
that.setData({
imgs:imgs
});
returnfalse;
}else{
imgs.push(tempFilePaths[i]);
}
}
//console.log(imgs);
that.setData({
imgs:imgs,
});
//循环把图片上传到服务器
for(vari=0;i
2，我们注意到我的wx.request请求中Wx_SaveHomeWork方法是后台服务器的接收图片方法，
后边我会把这个方法展示出来，
3.tp5后台controller中：
//存取学生作业信息
publicfunctionWx_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($filesas$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实现微信小程序多图片上传到服务器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

tp5实现微信小程序多图片上传到服务器功能

热门推荐

随机推荐