使用promise解决循环请求接口数据（for循环）&使用el-upload组件自定义上传文件

最新推荐文章于 2023-03-13 09:35:09 发布
最新推荐文章于 2023-03-13 09:35:09 发布
阅读量2.1k 收藏 7
点赞数 1
分类专栏： web前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25973779/article/details/107541857
版权
本文介绍如何在Vue.js中利用Promise.all处理for循环中的接口请求，确保所有文件上传完成后执行后续操作。通过el-upload组件实现自定义文件上传功能。
摘要由CSDN通过智能技术生成

 template部分：

          <el-upload
            multiple //可以多选文件
            class="upload-demo"
            ref="upload" //组件名
            action="fakeaction" //因为是前后端分离的上传方式，所以这里的action随便填一个
            :file-list="fileList" //文件列表
            :auto-upload="false"> //设置不自动上传
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          </el-upload>

method部分：

    submitUpload(){
      this.count = 0 //用来判断是否所有文件都上传了
      var promiseList = [] //新建异步列表，一定要用[]
      let { uploadFiles } = this.$refs.upload //获取上传文件列表
最低0.47元/天 解锁文章
爱草莓的番茄酱
关注
专栏目录
promise for循环中等待请求成功后再进行下次请求
m0_65730686的博客
12-09 1725
promise for循环中等待请求成功后再进行下次请求
js for循环遍历每一项异步请求，遍历结束后执行使用promise.all
我是小奶音啊的博客
07-08 7270
场景： 数组遍历中每次遍历都需要去请求getStaffCover接口，拿到该接口的结果拼接到数组的每一项，等到数组遍历完之后，拿到拼接好的数组。拼接的数组必须是最终遍历的结果，所以得等到所有的请求结束之后进行操作，使用map可以返回每一次异步请求的Promise合集，注意这里不需要return，然后使用Promise.all等待执行完所有的异步操作，然后才会执行后面的代码 解决 const promise = nv.aiFaceData.items.map(async item => {
promise for循环
qq_37299479的博客
07-26 1067
promise all for
Promise.all 循环中调用接口
怪兽的猫的博客
04-12 2520
开源商城 export default { methods: { getImageBase64(images) { // 生成一个数组 let spreadList = [] images.forEach(item => { const oneApi = imageBase64({ url: item.pic }).then(res => { return res.data.code;
promise.all解决循环数组调用接口
Miss_cym的博客
11-21 997
promise
Promise 对象循环调用
望京十三兄的博客
03-31 2408
解答： 首先定义一个可重复调用 Promise 的方法 functionretry(){ varpromise; promise=newPromise(function(resolve,reject){ varelapse=Math.random()*2000; setTimeout(resolve,elapse); ...
ElementUI el-upload 断点续传文件
热门推荐
qq_19694913的博客
07-25 1万+
官方的 Upload 组件从文档和所有demo来看，均只支持单文件上传，但是业务系统有大文件上传的需求，所以要用这个组件封装一个断点续传的功能。 从官方给出的文档看到有个 http-request 覆盖默认的上传行为，可以自定义上传的实现 似乎能满足要求，那就开撸。 确定需求：每次只能上传一个文件，最大支持2GB的任意文件（局域网），小于100M直接上传，大于100M的时候分块上传，并且要支...
vue+el-upload 上传图片和视频小总结
weixin_42574985的博客
11-09 5123
上传图片时用到的accept只会在用户点击上传时添加一个自定义文件类型，如添加了accept=".jpg,.png,"，虽然会呈现出符合条件的文件，但用户仍可以通过点击所有文件类型来上传其他类型的文件，此时设置before-upload函数，转换格式的时候，一定要将中间的变量置空！以及在商品详情中仍需要借此转换成base64的格式，但需要先用正则表达式将所有img标签里的src获取到，其他的基本大同小异了。破解循环中的异步操作，不能直接用for循环，在我看来有效的办法方法体内的num++，再回调此函数。
文档_Vue02_事件处理_表单双向绑定_组件_Prop_自定义事件_插槽_动态与异步组件
pre_eminent的JAVA学习园地
05-05 1194
Vue.js_官方文档学习笔记_Part_02事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：&lt;div id="example-1"&gt; &lt;button v-on:click="counter += 1"&gt;Add 1&lt;/button&gt; &lt;p&gt;The button above has...
elment ui 组件bug总结
IT博客技术分享
04-04 3564
一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗 第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置 在mian.js里面： import Elem.
Promise 实现文件串行上传请求
qq_37750365的博客
08-06 361
// input multiple 多文件上传 let files = [] const upload = file => { return (resolve, reject)=> { return new Promise((resolve, reject)=>{ // 文件上传操作 }) } } let waitingQueue = [] files.forEach(file => { wait.
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
向宇
07-20 3072
vue实现循环发起多个异步请求——Promise.all()与Promise.race()————from 向宇
循环调用Promise，解决方案
最新发布
qq_46544185的博客
03-13 1657
循环调用Promise，解决方案
promise循环调用异步函数（以图片上传为例）
weixin_30847865的博客
12-28 297
引言：我们在项目中经常会遇到图片上传的情况，一般图片上传我们为了考虑性能和其他因素，因此经常会设计为将图片数组循环单个图片上传；因此这就使用了promise的for循环 uploadImages(){ //总的图片上传函数 return new Promise((resolve, reject) => { ...
循环调接口获取数据是[Promise]格式
qq_42600647的博客
12-09 716
【代码】循环调接口获取数据是[Promise]格式。
循环请求接口，拿到所有数据在进行请求。
BrightLD的博客
11-20 763
循环请求接口，拿到所有的数据，再去请求接口，将异步操作转化为同步的形式
第13集丨Promise循环使用
秋堂主的博客
07-12 583
在for循环中，先把for循环结束完，才会调用then中的回调函数。 采用递归调用的形式改写for循环， 在T函数中, 由于T2中有异步操作，无法保证，运行完T2之后，在执行打印console.log("我是后续操作...")语句，...
Promise 封装多张图片上传 Promise.all的简单使用
qq_21772835的博客
03-02 2090
Promise 封装多张图片上传 运用场景 多图上传或者类型情况下 1.需要判断图片是否上传成功 2.图片上传顺序问题 3.在 Promise 的中有一个 Promise.all 的方法 部分代码 Promise.all 传入 promise 对象 数组，当所有的请求 都上传成功后，在 then 中接收到上传成功 或者失败的结果 Promise.all 简介 Promise.all()...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值