ASCII码 ASCII码

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

发布于：2022-04-10 12:36:50  栏目：技术文档

这最近在做一个教育类的小商城的微信小程序，用到了上传多个图片文件到服务器端。下面脚本之家小编给大家带来了tp5实现微信小程序多图片上传到服务器的方法,需要的朋友可以参考下

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

  1. <!--选择图片 -->
  2. <view class="picture">
  3. <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  4. <image class='imgSelected' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
  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. })

我们注意到我的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.   }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行