节目发布上传一些本地图片，上拉加载照片图片加载延迟之道

 

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

最近做项目的时候要实现一个上传相片的功能用了微信提供的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端调试可以上传多张成功准备工作而我用了for循环多次上传的在pc端调试可以上传多张成功但是在真机调试的时候却还是只能上传一张于是我便投机在上传成功之后再次调取wx.uploadFile进行上传结果成功了为了代码整洁我便用了递归的方式进行调用。

 

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

问题描述

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