当前位置:首页 > CMS教程 > Thinkphp > 列表

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

发布:smiling 来源: PHP粉丝网  添加日期:2018-11-15 09:44:10 浏览: 评论:0 

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

1,小程序端:

在wxml文件中:

  1. <!--选择图片 --> 
  2. <view class="picture"
  3. <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"
  4. <img class="imgSelected" src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"
  5. <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg">删除</view> 
  6. </view> 
  7. <view class="clickImg" bindtap="chooseImg">点击上传作业</view> 
  8. </view> 
  9. <!-- 选择图片end --> 

在js文件中:

  1. Page({ 
  2. /** 
  3.  * 页面的初始数据 
  4. */ 
  5. data: { 
  6.  index: 0, 
  7.  multiIndex: [0, 0], 
  8. //传到后台的课程分类 
  9. cname:''
  10.  }, 
  11. /** 
  12.  * 生命周期函数--监听页面加载 
  13. */ 
  14. onLoad: function (options) { 
  15.  }, 
  16. /** 
  17.  *  
  18.  * 生命周期函数--监听页面初次渲染完成 
  19. */ 
  20. onReady: function () { 
  21.  }, 
  22. /** 
  23.  * 生命周期函数--监听页面显示 
  24. */ 
  25. onShow: function () { 
  26.  }, 
  27. /** 
  28.  * 生命周期函数--监听页面隐藏 
  29. */ 
  30. onHide: function () { 
  31.  }, 
  32. /** 
  33.  * 生命周期函数--监听页面卸载 
  34. */ 
  35. onUnload: function () { 
  36.  }, 
  37. /** 
  38.  * 页面相关事件处理函数--监听用户下拉动作 
  39. */ 
  40. onPullDownRefresh: function () { 
  41.  }, 
  42. /** 
  43.  * 页面上拉触底事件的处理函数 
  44. */ 
  45. onReachBottom: function () { 
  46.  }, 
  47. /** 
  48.  * 用户点击右上角分享 
  49. */ 
  50. onShareAppMessage: function () { 
  51.  }, 
  52. // 上传图片操作 
  53. // 上传图片 
  54. chooseImg: function (e) { 
  55. var that = this
  56. if(that.data.cname==''){ 
  57.  }else
  58. var imgs = this.data.imgs; 
  59. if (imgs.length >= 9) { 
  60. this.setData({ 
  61.  lenMore: 1 
  62.  }); 
  63.  setTimeout(function () { 
  64.  that.setData({ 
  65.  lenMore: 0 
  66.  }); 
  67.  }, 2500); 
  68. return false
  69.  } 
  70.  wx.chooseImage({ 
  71. // count: 1, // 默认9 
  72.  sizeType: ['original''compressed'], // 可以指定是原图还是压缩图,默认二者都有 
  73. sourceType: ['album''camera'], // 可以指定来源是相册还是相机,默认二者都有 
  74. success: function (res) { 
  75. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 
  76. var tempFilePaths = res.tempFilePaths; 
  77. var imgs = that.data.imgs; 
  78. // console.log(tempFilePaths + '----'); 
  79. for (var i = 0; i < tempFilePaths.length; i++) { 
  80. if (imgs.length >= 9) { 
  81.  that.setData({ 
  82.  imgs: imgs 
  83.  }); 
  84. return false
  85.  } else { 
  86.  imgs.push(tempFilePaths[i]); 
  87.  } 
  88.  } 
  89. // console.log(imgs); 
  90.  that.setData({ 
  91.  imgs: imgs, 
  92.  }); 
  93. //循环把图片上传到服务器 
  94. for (var i = 0; i < imgs.length; i++) { 
  95.  wx.uploadFile({ 
  96.  url: url + 'Wx_SaveHomeWork'
  97.  filePath: imgs[i], 
  98.  name: 'files'
  99.  formData: { 
  100.  cname: that.data.cname 
  101.  }, 
  102.  success: function (res) { 
  103.  console.log(res) 
  104.  } 
  105.  }) 
  106.  } 
  107.  } 
  108.  }); 
  109.  } 
  110.  }, 
  111. // 删除图片 
  112. deleteImg: function (e) { 
  113. var imgs = this.data.imgs; 
  114. var index = e.currentTarget.dataset.index; 
  115.  imgs.splice(index, 1); 
  116. this.setData({ 
  117.  imgs: imgs 
  118.  }); 
  119.  }, 
  120. // 预览图片 
  121. previewImg: function (e) { 
  122. //获取当前图片的下标 
  123. var index = e.currentTarget.dataset.index; 
  124. //所有图片 
  125. var imgs = this.data.imgs; 
  126.  wx.previewImage({ 
  127. //当前显示图片 
  128. current: imgs[index], 
  129. //所有图片 
  130. urls: imgs 
  131.  }) 
  132.  }, 
  133. }) 

2,我们注意到我的wx.request请求中Wx_SaveHomeWork方法是后台服务器的接收图片方法,后边我会把这个方法展示出来。

3.tp5后台controller中:

  1. //存取学生作业信息 
  2.   public function Wx_SaveHomeWork(){ 
  3.     $files=\request()->file('files'); 
  4.     $cname=\request()->param('cname'); 
  5.     $cid=Db::name('course')->where('cname',$cname)->value('id'); 
  6.     $max_id=Db::name('homework')->max('id'); 
  7.     foreach($files as $item){ 
  8. // 移动到框架应用根目录/public/uploads/ 目录下 
  9.       $info = $files->rule('date')->move(ROOT_PATH . 'public' . DS . 'uploads'); 
  10.       if($info){ 
  11.         $saveName=str_replace("\\","/",$info->getSaveName()); 
  12.         $img='/uploads/'.$saveName
  13.         $homework[]=['id'=>$max_id+1,'img'=>$img,'cid'=>$cid]; 
  14.       } 
  15.     } 
  16.     //把数据插入到作业表中 
  17.     \db('homework')->insertAll($homework); 
  18.   } 

这里说一下,max_id的作用,因为接受的是多张图片,相当于一次性要存储多条数据,所以用max_id对id进行自增,存储到数据库表,cid是我自己数据库逻辑需要用到的变量,可以不用考虑。

4.讲解的不够清楚,因为是自己写的,感受不到难点在哪里,我自己的难点是在小程序端的图片上传,用了for循环,循环上传的方法,其他的相对来说,逻辑比较简单。

Tags: 微信小程序 tp5图片上传

分享到: