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

最新推荐文章于 2024-08-19 16:57:11 发布

爱草莓的番茄酱

最新推荐文章于 2024-08-19 16:57:11 发布

阅读量2.1k

点赞数 1

分类专栏： web前端文章标签： vue.js

本文链接：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 //获取上传文件列表