口碑好的句容网站建设,石家庄百度关键词搜索,网站设计与网站建设,访问紧急升级中通知问升级最近在做一个教育类的小商城的微信小程序#xff0c;用到了上传多个图片文件到服务器端#xff0c;这里做一个讲解#xff0c;希望对大家有所帮助。1#xff0c;小程序端#xff1a;在wxml文件中#xff1a;删除点击上传作业在js文件中#xff1a;Page({/*** 页面的初始…最近在做一个教育类的小商城的微信小程序用到了上传多个图片文件到服务器端这里做一个讲解希望对大家有所帮助。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, // 默认9sizeType: [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);$cidDb::name(course)-where(cname,$cname)-value(id);$max_idDb::name(homework)-max(id);foreach($files as $item){// 移动到框架应用根目录/public/uploads/ 目录下$info $files-rule(date)-move(ROOT_PATH . public . DS . uploads);if($info){$saveNamestr_replace(\\,/,$info-getSaveName());$img/uploads/.$saveName;$homework[][id$max_id1,img$img,cid$cid];}}//把数据插入到作业表中\db(homework)-insertAll($homework);}这里说一下max_id的作用因为接受的是多张图片相当于一次性要存储多条数据所以用max_id对id进行自增存储到数据库表cid是我自己数据库逻辑需要用到的变量可以不用考虑4.讲解的不够清楚因为是自己写的感受不到难点在哪里我自己的难点是在小程序端的图片上传用了for循环循环上传的方法其他的相对来说逻辑比较简单。总结以上所述是小编给大家介绍的tp5实现微信小程序多图片上传到服务器功能希望对大家有所帮助如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持
