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

您可能感兴趣的文章:微信小程序中上传图片并进行压缩的实现代码

微信小程序实现上传图片功能

微信小程序实现图片上传、删除和预览功能的方法

微信小程序上传图片到服务器实例代码

微信小程序多张图片上传功能

微信小程序图片选择、上传到服务器、预览(PHP)实现实例

微信小程序批量上传图片到七牛(推荐)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值