最近在做一個(gè)教育類(lèi)的小商城的微信小程序，用到了上傳多個(gè)圖片文件到服務(wù)器端，這里做一個(gè)講解，希望對(duì)大家有所幫助。

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

在js文件中：

1. Page({ 
2. /** 
3.  * 頁(yè)面的初始數(shù)據(jù) 
4. */ 
5. data: { 
6.  index: 0, 
7.  multiIndex: [0, 0], 
8. //傳到后臺(tái)的課程分類(lèi) 
9. cname:'', 
10.  }, 
11. /** 
12.  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 
13. */ 
14. onLoad: function (options) { 
15.  }, 
16. /** 
17.  *  
18.  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 
19. */ 
20. onReady: function () { 
21.  }, 
22. /** 
23.  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 
24. */ 
25. onShow: function () { 
26.  }, 
27. /** 
28.  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 
29. */ 
30. onHide: function () { 
31.  }, 
32. /** 
33.  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 
34. */ 
35. onUnload: function () { 
36.  }, 
37. /** 
38.  * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 
39. */ 
40. onPullDownRefresh: function () { 
41.  }, 
42. /** 
43.  * 頁(yè)面上拉觸底事件的處理函數(shù) 
44. */ 
45. onReachBottom: function () { 
46.  }, 
47. /** 
48.  * 用戶點(diǎn)擊右上角分享 
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, // 默認(rèn)9 
72.  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
73. sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有 
74. success: function (res) { 
75. // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的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. //循環(huán)把圖片上傳到服務(wù)器 
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. // 預(yù)覽圖片 
121. previewImg: function (e) { 
122. //獲取當(dāng)前圖片的下標(biāo) 
123. var index = e.currentTarget.dataset.index; 
124. //所有圖片 
125. var imgs = this.data.imgs; 
126.  wx.previewImage({ 
127. //當(dāng)前顯示圖片 
128. current: imgs[index], 
129. //所有圖片 
130. urls: imgs 
131.  }) 
132.  }, 
133. }) 

2，我們注意到我的wx.request請(qǐng)求中Wx_SaveHomeWork方法是后臺(tái)服務(wù)器的接收?qǐng)D片方法，后邊我會(huì)把這個(gè)方法展示出來(lái)。

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

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

這里說(shuō)一下，max_id的作用，因?yàn)榻邮艿氖嵌鄰垐D片，相當(dāng)于一次性要存儲(chǔ)多條數(shù)據(jù)，所以用max_id對(duì)id進(jìn)行自增，存儲(chǔ)到數(shù)據(jù)庫(kù)表，cid是我自己數(shù)據(jù)庫(kù)邏輯需要用到的變量，可以不用考慮。

4.講解的不夠清楚，因?yàn)槭亲约簩?xiě)的，感受不到難點(diǎn)在哪里，我自己的難點(diǎn)是在小程序端的圖片上傳，用了for循環(huán)，循環(huán)上傳的方法，其他的相對(duì)來(lái)說(shuō)，邏輯比較簡(jiǎn)單。