tp5实现微信小程序多图片上传到服务器功能
发布:smiling 来源: PHP粉丝网 添加日期:2018-11-15 09:44:10 浏览: 评论:0
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助。
1,小程序端:
在wxml文件中:
- <!--选择图片 -->
- <view class="picture">
- <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
- <img class="imgSelected" src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
- <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循环,循环上传的方法,其他的相对来说,逻辑比较简单。
Tags: 微信小程序 tp5图片上传
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)