国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > ThinkPHP > 正文

tp5實現微信小程序多圖片上傳到服務器功能

2024-09-09 15:20:28
字體:
來源:轉載
供稿:網友

最近在做一個教育類的小商城的微信小程序,用到了上傳多個圖片文件到服務器端,這里做一個講解,希望對大家有所幫助。

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循環,循環上傳的方法,其他的相對來說,邏輯比較簡單。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板: 保康县| 东海县| 图木舒克市| 茂名市| 清镇市| 隆安县| 巴东县| 南汇区| 弥勒县| 池州市| 雷波县| 开鲁县| 宁波市| 天等县| 佛冈县| 平远县| 高平市| 庆云县| 洪江市| 福建省| 九寨沟县| 胶南市| 文安县| 新晃| 象州县| 敖汉旗| 丹东市| 峡江县| 双柏县| 龙井市| 瑞丽市| 涡阳县| 富平县| 宽甸| 河津市| 团风县| 九台市| 商城县| 夏津县| 渝北区| 鄱阳县|