微信小程序-多图片上传(基于Promise.all实现)

本文介绍如何使用Promise.all封装微信小程序的wx.uploadFile方法以实现多文件并发上传。通过示例代码展示如何在页面中调用封装后的上传函数,并讨论了在上传失败时的处理策略。此外,还提供了wx.chooseImage的选择图片示例,以及后端接收到图片并保存的简单说明。请注意在实际使用中添加异常处理。

如你所了解到的,微信小程序的wx.uploadFile每次仅支持单文件上传。但在实际的应用场景中往往有多文件上传的需求。因此我打算用Promise.all对wx.uploadFile进行一层封装,让其能够实现多文件上传。

说在前面:若你了解Promise.all的用法.那么你一定知道这样封装的结果:同时上传多张图片,假如其中某一张上传失败,那么Promise.all将判定这次多图上传失败【上传失败的图片之前的图片实际上传了,上传失败的图片之后的图片不再上传】。

因此,若你的需求是在一次多图任务上传过程,必须每张图片上传成功才算本次多图上传任务成功,那么Promise.all封装很适合你,如果你只想多次执行wx.uploadFile且多次上传之间没有依赖关系,那么可以参考使用网上其他递归或for循环封装的方法,不建议采用promise.all。

一.封装wx.uploadFile

新建一个uploadFile.js文件

module.exports=function(filePath){
  return new Promise((resolve,reject)=>{
    wx.uploadFile({
      filePath:filePath //上传文件的文件路径
      name: 'pic',  //上传的文件名,主要用于后端定位该文件
      url: '后端的url',
      formData:{
        //本次请求中若需要其他参数,可在该部分写
         //例如 :
        //'
微信小程序中的 `Promise.all` 方法本质上是 JavaScript 的标准方法,因此它的行为与浏览器环境中的 `Promise.all` 一致。`Promise.all` 用于处理多个 Promise 实例,但它同样可以接受同步函数的返回值,只要这些返回值最终符合 Promise 的规范。 如果在 `Promise.all` 中传入的同步函数返回的是一个非 Promise 值,则 JavaScript 会自动将该值包装成一个已解决(resolved)的 Promise。例如: ```javascript const result = await Promise.all([ 123, // 同步值,自动包装为 Promise.resolve(123) 'abc' // 同步值,自动包装为 Promise.resolve('abc') ]); console.log(result); // 输出 [123, 'abc'] ``` 在微信小程序中,`Promise.all` 支持这种用法,因为 `Promise.all` 的参数是一个可迭代对象,每个元素可以是 Promise 或任何可解析为 Promise 的值(包括原始值和同步函数返回的值)[^1]。因此,如果传入的同步函数返回的是一个原始值或对象,`Promise.all` 会将其当作一个已解决的 Promise,并且该值会直接出现在最终的结果数组中。 此外,如果需要在 `Promise.all` 中使用同步函数进行某些处理,也可以通过立即执行函数表达式(IIFE)来实现: ```javascript const result = await Promise.all([ (function() { return '同步函数结果'; })(), // 同步函数立即执行 Promise.resolve('异步结果') ]); console.log(result); // 输出 ['同步函数结果', '异步结果'] ``` 需要注意的是,虽然 `Promise.all` 支持同步函数,但如果同步函数内部抛出异常,则 `Promise.all` 会立即将其当作一个拒绝(rejected)的 Promise 处理。例如: ```javascript try { const result = await Promise.all([ (function() { throw new Error('同步错误'); })(), Promise.resolve('成功结果') ]); } catch (error) { console.error(error.message); // 输出 "同步错误" } ``` 在这种情况下,即使其他 Promise 成功解决,`Promise.all` 也会因为同步函数抛出异常而立即拒绝。 ### 总结 - `Promise.all` 可以接受同步函数的返回值,这些值会被自动包装成已解决的 Promise- 如果同步函数抛出异常,`Promise.all` 会立即将其当作拒绝处理。 - 微信小程序中 `Promise.all` 的行为与标准 JavaScript 一致,支持同步函数的使用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值