使用tp5怎么實(shí)現(xiàn)微信小程序多圖片上傳到服務(wù)器功能

今天就跟大家聊聊有關(guān)使用tp5怎么實(shí)現(xiàn)微信小程序多圖片上傳到服務(wù)器功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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">點(diǎn)擊上傳作業(yè)</view>
</view>
<!-- 選擇圖片end -->

在js文件中：

Page({
/**
 * 頁面的初始數(shù)據(jù)
*/
data: {
 index: 0,
 multiIndex: [0, 0],
//傳到后臺(tái)的課程分類
cname:'',
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
 },
/**
 * 
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
 },
/**
 * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
 },
/**
 * 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
 },
/**
 * 用戶點(diǎn)擊右上角分享
*/
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, // 默認(rèn)9
 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的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,
 });
//循環(huán)把圖片上傳到服務(wù)器
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
 });
 },
// 預(yù)覽圖片
previewImg: function (e) {
//獲取當(dāng)前圖片的下標(biāo)
var index = e.currentTarget.dataset.index;
//所有圖片
var imgs = this.data.imgs;
 wx.previewImage({
//當(dāng)前顯示圖片
current: imgs[index],
//所有圖片
urls: imgs
 })
 },
})

2，我們注意到我的wx.request請(qǐng)求中Wx_SaveHomeWork方法是后臺(tái)服務(wù)器的接收?qǐng)D片方法，

后邊我會(huì)把這個(gè)方法展示出來，

3.tp5后臺(tái)controller中：

//存取學(xué)生作業(yè)信息
  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){
// 移動(dòng)到框架應(yīng)用根目錄/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];
      }
    }
    //把數(shù)據(jù)插入到作業(yè)表中
    \db('homework')->insertAll($homework);
  }

看完上述內(nèi)容，你們對(duì)使用tp5怎么實(shí)現(xiàn)微信小程序多圖片上傳到服務(wù)器功能有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。