gallery.gif 
數(shù)據(jù)： 
依賴接口wx.upload、chooseImage與preview 
數(shù)據(jù)請求通過LeanCloud完成

圖片選擇：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject

前端處理：

1.保存images數(shù)組為已選擇圖片 
2.選擇了更多圖片后concat數(shù)組 
3.預覽圖集 
4.leancloud上傳多圖，目測順序一致

js代碼

1. const AV = require('../../../utils/av-weapp.js')var that;
2. Page({ data: { images: [], uploadedImages: [], imageWidth: getApp().screenWidth / 4 - 10
3. }, onLoad: function (options) {
4. that = this; var objectId = options.objectId; console.log(objectId);
5. }, chooseImage: function () { // 選擇圖片
6. wx.chooseImage({ sizeType: ['compressed'],
7. sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
8. success: function (res) { // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
9. var tempFilePaths = res.tempFilePaths; console.log(tempFilePaths);
10. that.setData({ images: that.data.images.concat(tempFilePaths)
11. });
12. }
13. })
14. }, previewImage: function () { // 預覽圖集
15. wx.previewImage({ urls: that.data.images
16. });
17. }, submit: function () { // 提交圖片，事先遍歷圖集數(shù)組
18. that.data.images.forEach(function (tempFilePath) { new AV.File('file-name', { blob: { uri: tempFilePath,
19. },
20. }).save().then( // file => console.log(file.url())
21. function(file) { // 先讀取
22. var uploadedImages = that.data.uploadedImages;
23. uploadedImages.push(file.url()); // 再寫入
24. that.setData({ uploadedImages: uploadedImages
25. }); console.log(uploadedImages);
26. }
27. ).catch(console.error);
28. });
29. wx.showToast({ title: '評價成功', success: function () {
30. wx.navigateBack();
31. }
32. });
33. }, delete: function (e) { var index = e.currentTarget.dataset.index; var images = that.data.images;
34. images.splice(index, 1);
35. that.setData({ images: images
36. });
37. }
38. })

wxml代碼

1. <view class="gallery">
2. <view class="item" wx:for="{{images}}" wx:key="">
3. <image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src=" {{item}}" bindtap="previewImage" mode="aspectFill" />
4. <!-- 刪除按鈕 -->
5. <view class="delete" bindtap="delete" data-index="{{index}}"><image style="left: {{imageWidth / 2 - 10}}px;" src="/images/icon_delete.png" /></view>
6. </view>
7. <view class="item">
8. <image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src="/images/icon_add.png" class="button-upload" bindtap="chooseImage" />
9. </view></view><button type="primary" bindtap="submit">提交</button>

wxss代碼

1. /*畫廊*/.gallery { /*margin-bottom: 100rpx;*/
2. display: flex; justify-content: flex-start; flex-wrap: wrap;
3. }/*每張圖片所占容器*/.item { position: relative; margin: 5px;
4. }/*刪除按鈕*/.delete { position: absolute; height: 20px; bottom: 0; width: 100%; background: #ccc; opacity: .8;
5. }.delete image { position: absolute; width: 20px; height: 20px;
6. }

源碼下載：http://git.oschina.net/dotton/lendoo-wx，本文涉及代碼存于/pages/member/evalute文件夾中。