tp5实现微信小程序多图片上传到服务器功能
程序员文章站
2022-05-02 23:05:52
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助。
1,小程序端:
在wxml文件中:
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助。
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 () { }, // 上传图片操作 // 上传图片 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实现微信小程序多图片上传到服务器功能,希望对大家有所帮助