Promise 封装多张图片上传 Promise.all的简单使用

最新推荐文章于 2024-05-17 09:42:00 发布
最新推荐文章于 2024-05-17 09:42:00 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： Es6 文章标签： es6 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21772835/article/details/104616243
版权

Promise 封装多张图片上传

运用场景

多图上传或者类型情况下
1.需要判断图片是否上传成功
2.图片上传顺序问题
3.在 Promise 的中有一个 Promise.all 的方法

部分代码

在这里插入图片描述

Promise.all 传入 promise 对象 数组，当所有的请求 都上传成功后，在 then 中接收到上传成功 或者失败的结果

Promise.all 简介

Promise.all() 批量执行 Promise.all([p1, p2,
p3])用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise 它接收一个数组作为参数
数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变
当所有的子Promise都完成，该Promise完成，返回值是全部值得数组
有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

结语

一个简单的 Promise 使用列子 有错误的地方 大家可以指出

A韶
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 - Promise 封装多张图片上传
陈同学的博客
05-30 3832
前言 最近，项目需要新加一个用户发布文章的功能，因为小程序选取的图片都是临时路径，所以需要上传到服务器转为网络图片路径再发布出去。但是小程序上传图片只支持单张图片，在这种情况下图片的上传完成后输出的顺序、判断图片是否全部上传完成等，都是一些需要注意的点。在 Promise 的中有一个Promise.all的方法（简单来说就是当所有的异步请求成功后才会执行），在这个方法的帮助下，这些问题都迎刃...
微信小程序 - Promise 封装多张图片上传(后续)
陈同学的博客
06-01 1722
问题 昨天在使用封装的promise上传图片时，又发现了一个小问题（主要因为业务的需要） 如果，传入的数组中有一些已经是网络图片路径时，上传图片就会出现报错，导致整个图片上传都崩了。原因是wx.uploadFile上传只接受临时图片路径。 所以，在上传前还要做图片url的判断。 改进 export const uploadImage = (tempFilePaths)=>{ ...
Promise实现多图预加载
weixin_30257433的博客
06-13 150
Promise正如它的中文意思“承诺”一样，保存着未来会发生事件（一般为异步操作）。Promise避免了“回调地狱”，写法更加接近同步操作。说到同步，我更加喜欢async、await，它们书写更贴近同步操作。 图片加载往往是异步的，如果有操作需要等到所有的图片加载完之后再执行，这时候就需要不断的监听所有图片的加载情况。 ES5 利用ES5实现多图预加载，可以通过计数器判断有多少图片加载完成。...
uniapp 微信小程序 图片上传方法 uploadFilePromise 图片上传到服务器
最新发布
maoge_666的博客
05-17 247
uniapp 微信小程序 图片上传方法 uploadFilePromise 图片上传到服务器
44. JS 应用场景(Promise => 图片上传)
weixin_34148456的博客
10-20 214
首发于我的github博客, 欢迎关注 Promise Promise.reject() element || iview 上传图片尺寸校验 在上传图片之前，验证图片大小、尺寸等信息，可以返回一个Promise。当验证成功的时候，可以return file。 这样，在upload中可以拿到该文件对象 当验证失败的时候，需要使用reject，因此需要使用return Promise.re...
Promise.all在文件上传中的应用
lihefei_coder的博客
06-12 905
Promise.all可以将多个Promise实例包装成一个新的Promise实例。 Promise.all获得的成功结果的数组里面的数据顺序和发送请求的顺序是一致的，而不会根据响应结果的顺序排序。 Promise.all失败的时候则返回最先被reject失败状态的值，与成功的返回顺序是不同的。 Promse.all在处理多个异步处理时非常有用，例如表单中上传相册，需要所有图片上传完毕得到地址才能提交表单，可以通过Promse.all控制一个loading变量的状态来校验提交条件。 上传相册的例子： .
微信小程序-多图片上传(基于Promise.all实现)
SCY164759920的博客
08-24 3376
如你所了解到的，微信小程序的wx.uploadFile每次仅支持单文件上传。但在实际的应用场景中往往有多文件上传的需求。因此我打算用Promise.all对wx.uploadFile进行一层封装，让其能够实现多文件上传。说在前面:若你了解【上传失败的图片之前的图片实际上传了，上传失败的图片之后的图片不再上传】。因此，若你的需求是在一次多图任务上传过程，必须每张图片上传成功才算本次多图上传任务成功，那么Promise.all封装很适合你。
js代码-基于Promise对象实现Promise.all方法(Promise)
07-15
例如，你可能需要从多个API接口获取数据，可以将每个请求封装成一个Promise，然后使用Promise.all来等待所有请求完成。 ```javascript const urls = ['api1', 'api2', 'api3']; const promises = urls.map(url => ...
使用Promise解决多层异步调用的简单学习心得
11-24
【使用Promise解决多层异步调用的简单学习心得】 Promise是JavaScript中处理异步操作的重要工具，它最早由微软在Windows 8的WinJS库中引入，随后在ES6中成为标准。Promise的设计思想是将异步操作的状态（pending、...
js代码-用 async 模拟 promise.all
07-14
在JavaScript的世界里，Promise.all是并行处理多个Promise的一个强大工具，它会等待所有Promise都解析（resolve）或第一个Promise被拒绝（reject）时返回结果。然而，有时我们可能需要理解其工作原理，并尝试自己用...
微信小程序网络请求库插件，使用 Promise封装wx_network-master.zip
09-25
在这个场景中，"微信小程序网络请求库插件，使用 Promise封装wx_network-master.zip" 是一个专门为微信小程序设计的网络请求库，旨在简化网络数据获取的过程，同时引入了Promise对象来处理异步操作。 在传统的微信...
微信小程序 ES6Promise.all批量上传文件实现代码
08-30
主要介绍了微信小程序 ES6Promise.all批量上传文件实现代码的相关资料,需要的朋友可以参考下
借助 Promise判断多张图片是否加载完成
黑眼圈
02-11 694
var urls = ["https://sina-static.oss-cn-beijing.aliyuncs.com/images/slide/300250_1.jpeg", "https://sina-static.oss-cn-beijing.aliyuncs.com/images/slide/300250_2.jpeg"]; let promiseAll = [], imgs = [], total = urls.length; for (let i = 0; i < total
【JS面试题】手写Promise加载图片
Milk~每天分享一点点，技术进步一点点
07-28 712
手写Promise加载一张图片 初始化: 1.html <body> <script src="./promise.js"></script> </body> promise-demo.js //手写promise加载图片 function loadImg(src) { const p = new Promise( (resolve, reject) => { const img = docume
promise循环调用异步函数（以图片上传为例）
weixin_30847865的博客
12-28 290
引言：我们在项目中经常会遇到图片上传的情况，一般图片上传我们为了考虑性能和其他因素，因此经常会设计为将图片数组循环单个图片上传；因此这就使用了promise的for循环 uploadImages(){ //总的图片上传函数 return new Promise((resolve, reject) => { ...
promise 实现多个文件上传的表单项，每一项可上传多个文件
圆子mom的博客
05-18 1048
翻了翻以前的文章，感觉不是自己写的~ 前提 用户需要提交一个表单，里面有许多需要填写的项（以下简称“题”），可以理解吧？ 最近有这么个需求： 一个表单需要支持多个上传文件的题，比如一道题叫做“上传身份证正反面”，一道题叫做“上传毕业证和学位证”，也就是题目数量不确定，每个需要的文件数量不确定 基本思路 1、用el-upload的组件，基本设置是autoUpload:false, action:'' 2、表单提交前，才提交文件，而不是一选择文件后就让它上传；文件出错就不允许提交表单 3、等文件服务器将name
promise.all按顺序批量上传图片文件
weixin_45371730的博客
10-12 405
Promise.all可以将多个Promise实例包装成一个新的Promise实例,同时 Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即使后面的promose实例结束早于前面的实例，也会排列在后面。这也是采用promise.all实现按顺序批量上传图片文件。需求背景：批量上传图片，等全部图片上传成功后回显图片，并且回显的图片顺序要和用户批量点击时的图片顺序保持一致。解决方案：promise.all 等待原则。一、关于promise.all。
使用promise解决循环请求接口数据（for循环）&使用el-upload组件自定义上传文件
爱草莓的番茄酱的博客
07-23 2099
template部分： <el-upload multiple //可以多选文件 class="upload-demo" ref="upload" //组件名 action="fakeaction" //因为是前后端分离的上传方式，所以这里的action随便填一个 :file-list="fileList" //文件列表 :auto-.
vue2 有多个已经封装的接口 使用promise.all 访问多个接口
05-30
在 Vue2 中使用 `Promise.all` 访问多个已经封装的接口可以这样实现： 假设我们有三个已经封装好的接口 `getUserInfo`、`getPostList` 和 `getCommentList`，它们的调用方式类似于： ```javascript getUserInfo() .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误情况 }) getPostList() .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误情况 }) getCommentList() .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误情况 }) ``` 我们可以将这些接口的 Promise 对象放入一个数组中，然后使用 `Promise.all` 执行这些 Promise，等待所有 Promise 都成功完成后，`then` 方法中的回调函数就会被执行，此时的 `responses` 数组包含了所有接口的响应数据。代码如下： ```javascript const promiseArray = [ getUserInfo(), getPostList(), getCommentList() ] Promise.all(promiseArray) .then(responses => { const userInfo = responses[0].data const postList = responses[1].data const commentList = responses[2].data console.log(userInfo, postList, commentList) }) .catch(error => { console.log(error) }) ``` 以上代码中，`promiseArray` 数组里包含了多个已经封装好的接口的 Promise 对象，使用 `Promise.all` 执行这些 Promise，等待所有 Promise 都成功完成后，`then` 方法中的回调函数就会被执行，此时的 `responses` 数组包含了所有接口的响应数据。可以根据需要修改相应的变量名和处理响应数据的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值