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

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一：小程序之一次性上传多个本地相片

最近由于项目需要所以学了下小程序，也做了一些东西，随后便有了以下的一些总结了，现在说说如何使用小程序一次性上传多个本地相片。

问题描述

最近做项目的时候要实现一个上传相片的功能，用了微信提供的api之后发觉很容易就做出来了，在pc端调试也没有弊端，但是等到我用真机调试的时候就发现出问题了，问题就是在真机调试的时候无法一次性上传多张图片。

老规矩，以源码为导向

photos.js

//部分参数我就不抽出了，关键是看实现机制
var app = getApp();
var baseUrl = app.baseUrl;
//上传图片的路径
var uploadUrl = baseUrl+'pictureController/insertPic';
var array = [];
var owerId = '33aef7e0ac1b11e6af9f142d27fd7e9e';
var albumId;
var pageSize = 9;
var currentPage = 1;
var cryUrl = app.cryUrl;
Page({
  data: {
        hasMore:false,

        cryUrl:cryUrl,

        clientHeight:0,

        // 图片布局列表（二维数组，由`albumList`计算而得）
        layoutList: [],

        // 布局列数
        layoutColumnSize: 3,

        // 是否显示loading
        showLoading: false,

        // loading提示语
        loadingMessage: '',

        // 是否显示toast
        showToast: false,

        // 提示消息
        toastMessage: '',

        // 是否显示动作命令
        showActionsSheet: false,

        // 当前操作的图片
        imageInAction: '',

        // 图片预览模式
        previewMode: false,

        // 当前预览索引
     previewIndex: 0,
     images_upload: '../resources/images/camera.png',
     imageBaseUrl : baseUrl+"pictures/"
  },
  /* 函数描述：作为上传文件时递归上传的函数体体；
   * 参数描述： 
   * filePaths是文件路径数组
   * successUp是成功上传的个数
   * failUp是上传失败的个数
   * i是文件路径数组的指标
   * length是文件路径数组的长度
   */      
    uploadDIY(filePaths,successUp,failUp,i,length){
      wx.uploadFile({
                    url: uploadUrl, 
                    filePath: filePaths[i],
                    name: 'fileData',
                    formData:{
                      'pictureUid': owerId,
                      'pictureAid': albumId
                    },
                    success: (resp) => {
                        successUp++;
                    },
                    fail: (res) => {
                        failUp ++;
                    },
                    complete: () => {
                        i ++;                        
                        if(i == length)
                        {                      
                          this.showToast('总共'+successUp+'张上传成功,'+failUp+'张上传失败！');
                        }
                        else
                        {  //递归调用uploadDIY函数
                            this.uploadDIY(filePaths,successUp,failUp,i,length);
                        }
                    },
                });
  },
  uploadImage:function(e){
    wx.chooseImage({
        count: 9,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: (res) => {

                var successUp = 0; //成功个数
                var failUp = 0; //失败个数
                var length = res.tempFilePaths.length; //总共个数
                var i = 0; //第几个
               this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
            },        
    });
  }
})

那么如何使用呢？

修改了uploadUrl之后，直接调用 uploadImage 函数即可。

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

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

二：上拉加载照片以及图片加载延迟解决之道

问题描述

无论是app还是小程序，加载图片多的时候都会出现图片加载缓慢和流量耗费多的问题。而我在小程序中的解决方案是上拉加载和进行“变相懒加载”。

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

photos.wxml

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

源码解读：这里只需要关注bindscrolltolower函数即可，它意思是上拉的时候触发的函数，而这里触发的函数是loadMore。

photos.js

loadMore: function(e){
this.showLoading('正在加载图片中');
var that = this;
currentPage++;
wx.request({
        url: baseUrl  +'pictureController/getPicturesByAid',
        data: {
            pictureAid: albumId,
            pageSize: pageSize,
            currentPage : currentPage
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            console.log(res);
            if(res.data.result.length!=0)
            {
                array = array.concat(res.data.result)
                that.setData({
                    array : array
                })
            }
            else
            {
                that.showToast('已加载完全部图片!');
            }
        },
        complete: function(res){
            that.hideLoading();
        }
    })
}

源码解读：js函数中的一些参数和函数我都去掉了，留下这个loadMore函数，这个函数的作用是用pageSize和currentPage做分页参数传递到后台加载新的数据，然后将得到的数据res.data.result利用concat函数连接在array之后，array函数的作用是存放之前已经加载过来的数据，连接新数据结束后再用一次setData即可！

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

做过项目的都知道，图片的懒加载其实就是在图片还没有加载成功的时候出现一张默认的图片，这样可以不至于图片还没有加载成功的时候出现一大推空白的地方，我也是因为做项目出现这种情况之后才开始研究如何避开这种情况，大家可以看一下的源码：

<scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
<view class="function" style="background-image:url({{cryUrl}})" wx:for="{{array}}" wx:for-item="item">
    <image src="{{imageBaseUrl+item.pictureAid+'/'+item.pictureName}}" style="height:95%;width:95%;margin:3px auto;" bindtap="selectPhotos" id="{{imageBaseUrl+item.pictureAid+'/'+item.pictureName}}&{{item.pictureUploadtime}}"/>
</view> 
</scroll-view>

源码解读：这个就是从服务器获取图片数据成功之后循环排列图片的源码，重点在于style="background-image:url({{cryUrl}})" 里边是在图片还没有加载成功之前显示的一个div的背景图片，而就是这个背景图片避开了图标没加载成功之前空白的尴尬。
Note:发布的这些文章全都是自己边学边总结的，难免有纰漏，如果发现有不足的地方，希望可以指出来，一起学习咯，么么哒。
开源爱好者，相信开源的力量必将改变世界:
osc : https://git.oschina.net/xi_fan
github: https://github.com/wiatingpub