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

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

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) {

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实现微信小程序多图片上传到服务器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！