小程序多张图片上传（源码分享+实现分析）

本篇文章以小程序中的代表【微信小程序】为例，分享一下在微信小程序中实现多图上传的源码实现。

PS：其它小程序和 uni-app 也可通用该思路实现。

代码片段（可导入微信WEB开发者工具体验）：https://developers.weixin.qq.com/s/DHrt69mk7af3

本篇文章后面会对这两种方式的优缺点分析说明，让大家更好的选择使用合适的实现方式。

JS源码：

const app = getApp()Page({data: {// 已选择上传的本地图片地址urlArr:['helang.jpg','1846492969.jpg','web.jpg']},onLoad: function () {},// 多图上传-回调式uploadCallback(){let index = 0;  // 当前位置，标识已上传到第几张图片let newUrls = []; // 上传成功后的图片地址数组// 图片上传方法let upload = ()=>{let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址wx.showLoading({title: '正在上传',});/* 无图片上传接口，收setTimeout 模拟延迟状态项目中替换为 wx.uploadFile 即可*/// 假设每 1000ms 上传一张图片setTimeout(()=>{// 此处为已上传成功后的回调函数内容let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址newUrls.push(resUrl); // 将上传后的地址添加到成功数组中// 判断图片是否已经全部上传完成if (index >= (this.data.urlArr.length-1)){send();}else{//未全部上传完时标识位置+1并再次调用上传方法index++; upload();}},1000);}// 发送方法,用作图片上传完后，得到图片地址提交给其它接口或其它操作let send = () => {// 关闭加载提示wx.hideLoading();wx.showToast({title: '上传成功',icon:'success'})// 输出已经上传完的图片地址，请查看控制台结果console.log(newUrls);}// 调用上传方法upload();},// 多图上传-PromiseuploadPromise(){/* Promise 对象数组 */let p_arr = [];/* 新建 Promise 方法，nowUrl参数为当前上传的图片地址 */let new_p = (nowUrl) => {return new Promise((resolve, reject) => {/* 无图片上传接口，收setTimeout 模拟延迟状态项目中替换为 wx.uploadFile 即可*/// 假设每 1000ms 上传一张图片setTimeout(()=>{// 此处为已上传成功后的回调函数内容let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址resolve(resUrl);},1000);})}// 遍历数据，创建相应的 Promise 数组数据this.data.urlArr.forEach((item, index) => {let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址p_arr.push(new_p(nowUrl));});wx.showLoading({title: '正在上传',});/* 所有图片上传完成后调用该方法 */Promise.all(p_arr).then((res) => {// 关闭加载提示wx.hideLoading();wx.showToast({title: '上传成功',icon: 'success'})// 输出已经上传完的图片地址，请查看控制台结果console.log(res);});}
})

方法优缺点说明：

uploadCallback 方法

优点：

多图以队列形式按序提交，能很好的把握图片上传情况（比如：1.有个需求是要提示已经上传多少张，总共多少张。2.若因用户权限问题无法提交，在上传第一张图片时则已经知道）
相对减少服务器压力

缺点：全部上传完成所需时长相对较长

uploadPromise 方法

优点：全部上传完成所需时长相对较短

缺点：

多个请求同时发出，若服务器处理能力不足，会造成服务器并发问题导致崩溃。若是第三方服务器有可能被视为恶意请求而拦截；
对于有上传进度这种需求的情况下点难以处理。还有在上传错误时造成多次无效请求。（假设有100张图片，上传第一张时已经提示登录的帐号有问题，但还是会发出剩下的99次请求，接口返回的结果都是一样的失败）；

相信有一部分读者是通过循环上传来完成的，循环的方式与 uploadPromise 方法的方式又有什么区别呢？

循环的方式判断是否已经全部上传完成的便利性上不如 uploadPromise 方法的方式
循环的方式产生的结果与未上传前的数据排序不统一。（实际中图片的大小不一致，后上传的图片可能会比先上传的完成的更快）。

结合以上两点区别，小编放弃使用循环的方式实现多图上传的功能。

愿本篇文章对大家有所帮助！

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

小程序多张图片上传（源码分享+实现分析）相关推荐

微信小程序——多张图片上传（uploadFile） Java后台
首先是前端js的代码: Page({data: {},//选择并上传图片--Max:9张selectImage: function () {wx.chooseImage({count: 9,sizeT ...
小程序全局配置(app.json 源码分享)
配置清单: pages:页面路径列表 window:全局的默认窗口表现 tabBar:底部 tab 栏 networkTimeout:网络超时时间 permission:小程序接口权限相关设置 app ...
微信小程序跳一跳最新可用源码分享
网上都说不能运行或者文件锁住的代码,导致无法执行或者造成不可避免的错误.这个是本人亲自测试可用的.对学习有非常大的帮助吧!下面是链接地址:https://download.csdn.net/down ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
小程序一键生成系统网站源码
简介: 小程序一键生成系统网站源码,亲测没有问题,项目一本万利! 搭建部署方式: 测试环境:Linux+宝塔+php5.6+mysql5.5 第一步:修改配置信息修改指引: 1:修改数据库配置连接路 ...
微信小程序入门（四）：miniprogram-ci + Jenkins + git 实现小程序代码的上传等操作
目录 1. 实现要求 2. 实现方式一 2.1 Jenkins中其他配置这里不重复了,重点说构建部分的命令 2.2 Jenkins中运行构建任务,在小程序页面检查上传结果,没问题 3. 实现方式二 3 ...
小程序源码：最新wordpress黑金壁纸微信小程序二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...
最新wordpress黑金壁纸微信小程序二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...

小程序多张图片上传（源码分享+实现分析）

本篇文章后面会对这两种方式的优缺点分析说明，让大家更好的选择使用合适的实现方式。

JS源码：

方法优缺点说明：

小程序多张图片上传（源码分享+实现分析）相关推荐

最新文章

热门文章

小程序 多张图片上传（源码分享+实现分析）

本篇文章后面会对这两种方式的优缺点分析说明，让大家更好的选择使用合适的实现方式。

JS源码：

方法优缺点说明：

小程序 多张图片上传（源码分享+实现分析）相关推荐

最新文章

热门文章

小程序多张图片上传（源码分享+实现分析）

小程序多张图片上传（源码分享+实现分析）相关推荐