小程序图片上传和Promise.all

最新推荐文章于 2025-06-11 19:32:26 发布
原创 最新推荐文章于 2025-06-11 19:32:26 发布 · 4.3k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #图片上传 #Promise

本文探讨了在小程序中如何处理图片上传的问题，尤其是在需要批量上传时如何利用Promise.all优化处理过程。作者通过自己的经验分享了如何从递归方法转换到使用Promise.all，以更高效地发送多个并发请求，并提醒读者深入理解并全面掌握新技术的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前写过一篇ES6异步处理方式： Promise / async await，对Promise和async await 有了简单的理解，但后来才发现我的理解太浅了，只是记录了基本知识而已。
在上家公司，遇到过需要发送多个总数不定的ajax的需求，当时的解决方式是使用递归，一个请求结束之后再发另一个，当时还以为自己很机智，写了这篇博客：javascript递归的实际应用场景。
所以当前两周，我遇到小程序的图片上传的问题（小程序的图片上传使用wx.uploadFile接口，但该接口不支持批量上传图片，上传n张图片就需要发送n个请求）时，就顺势想到了递归。但当我完成之后，却被同事点化了， 告诉我可以用Promise.all来很轻松的解决这个问题。

参考资料：

因为这件事情，得到了一个重要的教训：了解新知识，一开始理解比较浅没关系，但一定要全面，带着思考去看，搞清楚它能解决什么问题。达到在工作中遇到了相应的场景，才能想到他。

我当时就是因为不够全面，以至于忘记了还有Promise.all的存在，才很笨的绕了远路。

小程序图片上传

小程序上传图片的思路是先用wx.chooseI

最低0.47元/天 解锁文章

200万优质内容无限畅学
微信小程序运用promise
qq_31830547的博客
12-12 287
小程序使用promise同步处理异步请求 描述 小程序ES6版本的JS如果勾选了ES6转ES5选项则不能使用async做同步处理，但是还是可以利用es6的promise函数 JS代码 requestPro: function (url, options, headerParam) { //options请求头参数配置 url是请求路径,headerParam是请求头参数 // opti...
小程序 之 Promise
CaBCo的博客
04-29 5705
微信小程序遇到 Promise 那些事
Promise.all的详情理解
最新发布
2403_88746605的博客
06-11 941
摘要： Promise.all是处理多个Promise的静态方法，输入Promise数组后返回一个新Promise。当所有Promise成功时返回结果数组（保持输入顺序），任一失败则立即返回首个错误。典型应用场景包括并行API请求等需等待所有异步任务完成的场合。使用时需注意：结果顺序与输入一致而与解决时间无关，非Promise值会被直接返回，具有快速失败特性（首个失败即终止）。通过示例可见，合理使用Promise.all能有效管理异步操作，避免回调嵌套，提升代码可读性和执行效率。
小程序Promise上传文件
九城科技 博客：https://blog.minkse.cn/
09-15 1319
小程序如今对ES6支持良好，现在将之前的小程序项目给重新写了一遍。 遇到了小程序上传文件的问题，wx.uploadfile只能上传一个文件或者图片。 那么经过了一番折腾，得出了如下使用promise来上传文件的方法。 首先定义了一个mini.js class Mini { //上传文件 static upload(imageList) { var that ...
【小程序】promise在小程序中的运用
书呆子ITme
03-04 1090
当开发者在开发时，可能会遇到这种情况：一个页面的加载会需要多种请求返回的数据构成，当页面一旦加载，显示加载条，只有当所有的请求都成功之后才会显示其页面，才会隐藏加载条。 但多种请求无法预测哪个请求首先完成。 如果使用请求中套用请求这种方法，用户的体验不是很好。 可以采用 promise.all方法可以把多个promise实例合并为一个，等待所有的子promise全部执行完成之后,才会触发回调函数。...
小程序promise封装
weixin_46949711的博客
08-08 222
小程序promise封装
从微信小程序看promsie.all和promise顺序执行
03-29
最近在做小程序的开发，碰到的一个需求就是表单提交，提交的表单中包含有图片，微信这边的做法是先上传图片，后台把图片名称和地址返回给你，然后你把图片信息插入到表单的相应位置再提交表单，这里就涉及到如何上传...
微信小程序 ES6Promise.all批量上传文件实现代码
11-26
总结来说，微信小程序通过结合 ES6 的 Promise.all 和 `wx.uploadFile` API，可以实现批量上传文件的功能。服务端使用类似 Laravel 的框架接收并处理上传的文件，确保文件的有效性和存储。这样的设计提高了用户体验...
微信小程序promsie.all和promise顺序执行
08-29
在微信小程序中，由于并发请求的限制（一次最多10个），当图片数量超过10张时，直接使用Promise.all可能会导致错误。 例如，在表单提交的场景中，如果需要先上传多张图片，再提交表单，可以将每张图片的上传操作...
使用Promise在小程序中请求数据
weixin_44292923的博客
02-14 619
promise第一步是创建 第二步写异步代码 第三步修改进行中的状态，进而调用resolve或者reject 在小程序中使用的完整的步骤 创建config.js存储URL的地址 const config = { api_base_url: 'www.baidu.com', appkey:'dream6666' } export {config} 创建请求文件夹utils，下面创建ht...
微信小程序实现一张或多张图片上传（云开发）
10-16
主要介绍了微信小程序实现一张或多张图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
es6-promise（微信小程序等引用）
03-09
使用方法如下： const Promise = require("../es6-promise.js")； 即可创建 ，new Promise（）
微信小程序 es6 promise
03-06
微信小程序 es6 promise
使用Promise封装的微信小程序网络请求库
08-10
使用 Promise 封装的微信小程序网络请求库
微信小程序自我总结2，图片上传和Promise（微信小程序获取地理位置 微信小程序上传图片 微信小程序云存储 微信小程序setData性能）
全网同名：PBitW！ 可以去掘金关注我！
10-29 1580
微信小程序获取地理位置 微信小程序上传图片 微信小程序云存储 微信小程序setData性能
微信小程序-封装请求API——promise方式
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-24 1万+
微信小程序原生的请求API就是wx.request wx.request({ url: 'example.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } }) 有时候不能很好的适配我们的开发需求，比如我们要加一
详细分析Js中的Promise.all基本知识（附Demo）
热门推荐
码农研究僧的博客
03-19 1万+
Promise.all 是 JavaScript 中的一个方法，它接受一个由 Promise 对象组成的数组作为参数，并在所有 Promise 对象都变为 resolved（已完成）状态时才返回一个新的 Promise 对象，这个新的 Promise 对象的状态也变为 resolved，其值是一个包含了所有 Promise 对象结果的数组
小程序promise类使用教学-经验与案例分享#1
m0_63361829的博客
11-20 784
小程序promise类使用案例，经验分享
在微信小程序中的promise的基本用法
qq_24810411的博客
03-29 3746
const promise =new Promise((resolve,reject)=>{ //promise运行中有三个状态 //pending 进行中 //fulfilled 已成功 //rejected 已失败 wx.getSystemInfo({ succe...
使用promise.all实现wx.cloud.uploadfile多图上传
04-21
好的，你可以用以下代码来实现： ``` // 定义一个全局变量，用来存储上传成功后的文件ID const fileIdList = []; // 上传文件的函数 async function uploadFile(filePath) { return new Promise((resolve, reject) => { wx.cloud.uploadFile({ cloudPath: 'example.jpg', // 上传至云端的路径 filePath: filePath, // 小程序临时文件路径 success: res => { // 上传成功，将文件ID存入全局变量 fileIdList.push(res.fileID); resolve(res.fileID); }, fail: err => { reject(err); } }) }); } // 调用多图上传函数 async function uploadImages(paths) { const tasks = []; for(let path of paths) { tasks.push(uploadFile(path)); } // 等待所有Promise完成 Promise.all(tasks).then(() => { console.log('所有图片上传完毕，文件ID列表：', fileIdList); }).catch(err => { console.log('上传出错：', err); }); } // 调用方式 uploadImages(['path1', 'path2', 'path3']); ``` 在这个例子中，我们首先定义了一个用于存储上传成功后文件ID的全局变量fileIdList。然后定义了一个uploadFile函数，用于上传单个文件，并返回该文件的ID。在uploadFile函数中，我们使用Promise包装了wx.cloud.uploadFile函数，以便进行异步调用，上传成功后将文件ID存储到fileIdList中。 接下来，我们定义了一个uploadImages函数，用于上传多张图片。这个函数接收一个包含所有图片路径的数组作为参数，首先创建了一个空数组tasks，然后通过for循环遍历每个路径，将每个上传文件的Promise对象添加到tasks数组中。最后，使用Promise.all方法等待所有Promise对象都完成，进行回调处理。在回调函数中，我们打印出所有上传成功的文件ID列表。 注意，Promise.all方法会在所有Promise对象都完成之后才会进行回调处理，如果有一个Promise对象出错了，整个Promise.all操作也会失败，为了避免这种情况，我们在调用uploadFile函数时使用了async/await语法，将Promise包装成了async函数，以便进行错误处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值