请选择 进入手机版 | 继续访问电脑版
开启辅助访问
查看: 526|回复: 2

[技术研发] 小程序一次性上传多个本地图片,上拉加载照片以及图片...

[复制链接]

该用户从未签到

1

主题

1

帖子

15

积分

新手上路

Rank: 1

积分
15
发表于 2017-2-3 15:15:13 | 显示全部楼层 |阅读模式
本帖最后由 李锡钒 于 2017-2-3 15:26 编辑
小程序一次性上传多个本地图片,上拉加载照片以及图片加载延迟解决之道
说在前面
最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片。


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


老规矩,以源码为导向

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.         cryUrl:cryUrl,

  16.         clientHeight:0,

  17.         // 图片布局列表(二维数组,由`albumList`计算而得)
  18.         layoutList: [],

  19.         // 布局列数
  20.         layoutColumnSize: 3,

  21.         // 是否显示loading
  22.         showLoading: false,

  23.         // loading提示语
  24.         loadingMessage: '',

  25.         // 是否显示toast
  26.         showToast: false,

  27.         // 提示消息
  28.         toastMessage: '',

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

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

  33.         // 图片预览模式
  34.         previewMode: false,

  35.         // 当前预览索引
  36.      previewIndex: 0,
  37.      images_upload: '../resources/images/camera.png',
  38.      imageBaseUrl : baseUrl+"pictures/"
  39.   },
  40.   /* 函数描述:作为上传文件时递归上传的函数体体;
  41.    * 参数描述:
  42.    * filePaths是文件路径数组
  43.    * successUp是成功上传的个数
  44.    * failUp是上传失败的个数
  45.    * i是文件路径数组的指标
  46.    * length是文件路径数组的长度
  47.    */      
  48.     uploadDIY(filePaths,successUp,failUp,i,length){
  49.       wx.uploadFile({
  50.                     url: uploadUrl,
  51.                     filePath: filePaths[i],
  52.                     name: 'fileData',
  53.                     formData:{
  54.                       'pictureUid': owerId,
  55.                       'pictureAid': albumId
  56.                     },
  57.                     success: (resp) => {
  58.                         successUp++;
  59.                     },
  60.                     fail: (res) => {
  61.                         failUp ++;
  62.                     },
  63.                     complete: () => {
  64.                         i ++;                        
  65.                         if(i == length)
  66.                         {                     
  67.                           this.showToast('总共'+successUp+'张上传成功,'+failUp+'张上传失败!');
  68.                         }
  69.                         else
  70.                         {  //递归调用uploadDIY函数
  71.                             this.uploadDIY(filePaths,successUp,failUp,i,length);
  72.                         }
  73.                     },
  74.                 });
  75.   },
  76.   uploadImage:function(e){
  77.     wx.chooseImage({
  78.         count: 9,
  79.             sizeType: ['original', 'compressed'],
  80.             sourceType: ['album', 'camera'],
  81.             success: (res) => {

  82.                 var successUp = 0; //成功个数
  83.                 var failUp = 0; //失败个数
  84.                 var length = res.tempFilePaths.length; //总共个数
  85.                 var i = 0; //第几个
  86.                this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
  87.             },        
  88.     });
  89.   }
  90. })
复制代码


那么如何使用呢?
修改了uploadUrl之后,直接调用 uploadImage 函数即可。


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




说在前面
最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说在小程序中如何进行上拉加载照片和进行懒加载。


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


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

photos.wxml
  1.   <scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
  2.         //放置图片的代码
  3.     </scroll-view>
复制代码
源码解读:这里只需要关注bindscrolltolower函数即可,它意思是上拉的时候触发的函数,而这里触发的函数是loadMore。
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. }
复制代码
源码解读:js函数中的一些参数和函数我都去掉了,留下这个loadMore函数,这个函数的作用是用pageSize和currentPage做分页参数传递到后台加载新的数据,然后将得到的数据res.data.result利用concat函数连接在array之后,array函数的作用是存放之前已经加载过来的数据,连接新数据结束后再用一次setData即可!


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

做过项目的都知道,图片的懒加载其实就是在图片还没有加载成功的时候出现一张默认的图片,这样可以不至于图片还没有加载成功的时候出现一大推空白的地方,我也是因为做项目出现这种情况之后才开始研究如何避开这种情况,大家可以看一下的源码:
  1. <scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
  2. <view class="function" style="background-image:url({{cryUrl}})" wx:for="{{array}}" wx:for-item="item">
  3.     <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}}"/>
  4. </view>
  5. </scroll-view>
复制代码
源码解读:这个就是从服务器获取图片数据成功之后循环排列图片的源码,重点在于style="background-image:url({{cryUrl}})" 里边是在图片还没有加载成功之前显示的一个div的背景图片,而就是这个背景图片避开了图标没加载成功之前空白的尴尬。


Note:发布的这些文章全都是自己边学边总结的,难免有纰漏,如果发现有不足的地方,希望可以指出来,一起学习咯,么么哒。
开源爱好者,相信开源的力量必将改变世界:
osc : https://git.oschina.net/xi_fan
github: https://github.com/wiatingpub






回复

使用道具 举报

该用户从未签到

47

主题

167

帖子

452

积分

中级会员

Rank: 3Rank: 3

积分
452
发表于 2017-2-7 17:03:34 | 显示全部楼层
这个问题好多人提问的,这是一个办法,很赞
回复 支持 反对

使用道具 举报

该用户从未签到

0

主题

31

帖子

143

积分

注册会员

Rank: 2

积分
143
发表于 2017-6-20 11:17:29 | 显示全部楼层
需要完整代码才能测试
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

进站必读上一条 /1 下一条