小程序一次性上传多个本地图片,上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片
最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片。
问题描述
最近做项目的时候要实现一个上传相片的功能,用了微信提供的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
小程序一次性上传多个本地图片,上拉加载照片以及图片加载延迟解决之道相关推荐
- [微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转 小程序与H5交互以上传文件为例 微信小程序开放能力web-view使用之h5页面与小程序页面交互传值 快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
- php程序怎么上传服务器,php本地文件上传到远程服务器
利用curl实现把本地服务器的文件通过curl发送请求给远程服务器的php文件接受就实现了上传,还一个是利用ftp来上传方法也是php中的curl操作ftp服务器进行上传. 本地代码如下: heade ...
- ueditor 单图片上传后提示上传错误,本地已经上传到项目文件夹下,但无法展示
前端的js异步方法无法正常的执行下去,修改ueditor.all.js,大概在24568行 // domUtils.on(iframe, 'load', callback); // form.acti ...
- 微信小程序真机预览跟本地不同(轮播里面的商品图片不显示)
在苹果11.0.2版本中,轮播效果的图片没有显示,而在其他手机和开发者工具都有显示: 我们聚在一起尝试了各种可能性,最终发现给图片加上高度就可以看到了 如下图,需要给它设置单位为"rpx&q ...
- 微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录 一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载 三.分包加载 什么是分包 为什么要使用分包 如 ...
- vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传 最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家 效果图 创建一个图片上传的p ...
- 微信小程序上传Excel文件并分析上传值数据库
#一.在云函数文件夹以命令窗口打开运行npm install node-xlsx #二.在云函数js文件中程序如下: // 云函数入口文件 const cloud = require('wx-serv ...
- 将本地项目上传到Github的两种方式 1.在线上传 2.使用Git客户端上传
文章目录 注册GitHub账号并创建仓库 上传本地项目到Github的方式一:在线上传 上传本地项目到Github的方式二:使用Git客户端上传 Windows下安装Git客户端 Git配置本地用户名 ...
- 基于腾讯云开发微信小程序(新闻发布及共享平台)上
基于腾讯云开发微信小程序(新闻发布及共享平台)上 文章目录 传统的微信小程序开发 一.云开发是什么? 二.使用步骤 1.创建云环境 2.云数据库的创建 3.云储存 4.云函数 总结 传统的小程序开发 ...
最新文章
- LeetCode 462 Minimum Moves to Equal Array Elements II
- php学习之Model类
- python列表、集合、字典、元祖用途_Python-函数作用域和集合列表字典元祖
- 机器学习之数据预处理
- mysql技术innodb存储引擎读后感_《Mysql技术内幕-InnoDB存储引擎》读书笔记 (一)...
- 制作双足机器人用易拉罐_小学生手工小制作用易拉罐做飞机模型的方法
- 用TextPaint来绘制文字
- java quartz spring_JavaLib-quartz | 基于Spring Boot Quartz开发的定时任务
- python简体中文、繁体中文转换
- hdu3535 (分组背包,最少选一 + 最多选一 + 随意)
- double四舍五入
- c语言编程sinx泰勒公式_大白话5分钟带你走进人工智能-第12节梯度下降之原理泰勒公式(7)...
- 723. PUM(DAY 13)
- 【bioinfo】bedtools之intersect命令参数
- 猪圈密码(Pigpen)
- 关于阅读第一篇国外关于视觉论文的感受和收获
- 梦幻西游玩家最多的服务器,梦幻西游:第54次合服计划公布了,这两个服务器的玩家有福了...
- 使用“DiskGenius”精确隐藏硬盘坏道
- mybatis和spring整合mapper代理方法之问题3
- 思派健康再次冲刺港股:年经调整亏损3.6亿 腾讯是大股东
热门文章
- 微信公众平台对所有公众号开放自定义菜单
- Android应用工程文件组成
- 从“创业输家”到“创智赢家”
- 房子成焦点,被挂马的房产网站仍在增加中
- TensorFlow Lite:TensorFlow在移动设备与嵌入式设备上的轻量级跨平台解决方案 | Google 开发者大会 2018...
- Visual Studio 2017 - Windows应用程序打包成exe文件(1)- 工具简单总结
- Vulkan Tutorial 12 Fixed functions
- 用Piranha来实现WEB的负载均衡
- 公司Joomla项目笔记1
- awk数组命令经典生产实战应用拓展