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

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

　　1，小程序端：

　　在wxml文件中：

　　 <!--选择图片 --> <view class=picture> <view class=img wx:for={{imgs}} wx:for-item=item wx:key=*this> <image class=imgSelected src={{item}} data-index={{index}} mode=aspectFill bindtap=previewImg></image> <view class=delete-btn data-index={{index}} catchtap=deleteImg>删除</view> </view> <view class=clickImg bindtap=chooseImg>点击上传作业</view> </view> <!-- 选择图片end -->

　　在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 () { }, // 上传图片操作 // 上传图片me==){ }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) } }) } } }); } }, // 删除图片ex; 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实现微信小程序多图片上传到服务器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！