小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道

说在前面

问题描述

老规矩，以源码为导向

photos.js

1. //部分参数我就不抽出了，关键是看实现机制
2. var app = getApp();
3. var baseUrl = app.baseUrl;
4. //上传图片的路径
5. var uploadUrl = baseUrl+'pictureController/insertPic';
6. var array = [];
7. var owerId = '33aef7e0ac1b11e6af9f142d27fd7e9e';
8. var albumId;
9. var pageSize = 9;
10. var currentPage = 1;
11. var cryUrl = app.cryUrl;
12. Page({
13.   data: {
14.         hasMore:false,
15.  
16.         cryUrl:cryUrl,
17.  
18.         clientHeight:0,
19.  
20.         // 图片布局列表（二维数组，由`albumList`计算而得）
21.         layoutList: [],
22.  
23.         // 布局列数
24.         layoutColumnSize: 3,
25.  
26.         // 是否显示loading
27.         showLoading: false,
28.  
29.         // loading提示语
30.         loadingMessage: '',
31.  
32.         // 是否显示toast
33.         showToast: false,
34.  
35.         // 提示消息
36.         toastMessage: '',
37.  
38.         // 是否显示动作命令
39.         showActionsSheet: false,
40.  
41.         // 当前操作的图片
42.         imageInAction: '',
43.  
44.         // 图片预览模式
45.         previewMode: false,
46.  
47.         // 当前预览索引
48.      previewIndex: 0,
49.      images_upload: '../resources/images/camera.png',
50.      imageBaseUrl : baseUrl+"pictures/"
51.   },
52.   /* 函数描述：作为上传文件时递归上传的函数体体；
53.    * 参数描述： 
54.    * filePaths是文件路径数组
55.    * successUp是成功上传的个数
56.    * failUp是上传失败的个数
57.    * i是文件路径数组的指标
58.    * length是文件路径数组的长度
59.    */      
60.     uploadDIY(filePaths,successUp,failUp,i,length){
61.       wx.uploadFile({
62.                     url: uploadUrl, 
63.                     filePath: filePaths[i],
64.                     name: 'fileData',
65.                     formData:{
66.                       'pictureUid': owerId,
67.                       'pictureAid': albumId
68.                     },
69.                     success: (resp) => {
70.                         successUp++;
71.                     },
72.                     fail: (res) => {
73.                         failUp ++;
74.                     },
75.                     complete: () => {
76.                         i ++;                        
77.                         if(i == length)
78.                         {                      
79.                           this.showToast('总共'+successUp+'张上传成功,'+failUp+'张上传失败！');
80.                         }
81.                         else
82.                         {  //递归调用uploadDIY函数
83.                             this.uploadDIY(filePaths,successUp,failUp,i,length);
84.                         }
85.                     },
86.                 });
87.   },
88.   uploadImage:function(e){
89.     wx.chooseImage({
90.         count: 9,
91.             sizeType: ['original', 'compressed'],
92.             sourceType: ['album', 'camera'],
93.             success: (res) => {
94.  
95.                 var successUp = 0; //成功个数
96.                 var failUp = 0; //失败个数
97.                 var length = res.tempFilePaths.length; //总共个数
98.                 var i = 0; //第几个
99.                this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
100.             },        
101.     });
102.   }
103. })

那么如何使用呢？

我使用用递归的方式来多次上传选中的图片的原因？

小程序的官方文档有提到， wx.uploadFile一次只能上传一张图片，而我用了for循环多次上传的在pc端调试可以上传多张成功，但是在真机调试的时候却还是只能上传一张，于是我便投机在上传成功之后再次调取wx.uploadFile进行上传，结果成功了，为了代码整洁我便用了递归的方式进行调用。

说在前面

问题描述

老规矩，以源码为导向讲解上拉加载

photos.wxml

1.   <scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
2.         //放置图片的代码
3.     </scroll-view>

photos.js

1. loadMore: function(e){
2. this.showLoading('正在加载图片中');
3. var that = this;
4. currentPage++;
5. wx.request({
6.         url: baseUrl  +'pictureController/getPicturesByAid',
7.         data: {
8.             pictureAid: albumId,
9.             pageSize: pageSize,
10.             currentPage : currentPage
11.         },
12.         header: {
13.             'content-type': 'application/json'
14.         },
15.         success: function(res) {
16.             console.log(res);
17.             if(res.data.result.length!=0)
18.             {
19.                 array = array.concat(res.data.result)
20.                 that.setData({
21.                     array : array
22.                 })
23.             }
24.             else
25.             {
26.                 that.showToast('已加载完全部图片!');
27.             }
28.         },
29.         complete: function(res){
30.             that.hideLoading();
31.         }
32.     })
33. }

现在看看我是如何巧用变相懒加载的