element ui 上传文件,批量一次上传多个文件,为什么是发送了多次请求,我想一次请求

想要的效果是 用户一次选择的文件一个接口上传完毕,但是element ui 里面是上传了多次一次一个文件的形式上传的

https://img1.mukewang.com/5cb2a5ac0001fcc508000435.jpg

https://img4.mukewang.com/5cb2a5ad00017ed408000164.jpg

为4参数的接口调用了 多次执行的上传,我想上传一次 多个文件的 怎么实现呢?

因为element ui 里面的列表和我们的需求不一致 我重写了一个列表

<el-upload

                  class="upload-demo"

                  ref="upload" 

                  drag

                  :data="Aobject"

                 :on-success="handleAvatarSuccess"

                 :auto-upload="false"

                 :before-remove="beforeRemove"

                  :show-file-list="false"

                 :on-change="handleChange"

                   :on-remove="handleRemove"

                  :action="actionUrl"

                  multiple

                  :on-exceed="onExceed"

                  :limit="limit"

                  >

              <i class="el-icon-upload"></i>

              <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>

            </el-upload>

            

            

            

            

        <ul class="ul_two">

            <li v-for="(item,key) in FileList">

                <img :src="Image(item)" alt="" />

                <span>{{item.name}}</span>

                <i class="el-icon-circle-close-outline delClass" @click="del(item,key)"></i>

                <i class="el-icon-loading zhuanClass" v-if="item.wait"></i>

                <i class="el-icon-success zhuanClass"style="color: #01C001;" v-if="item.Success"></i>

            </li>

        </ul>

FileList 是用户每次选择文件的时候我push进去数据

      当用户提交的时候执行了

            scuuse(){

          this.Zhuan=true;

          const _id=this.$route.query.id;

          const _this=this;

          for(var i=0;i<this.FileList.length;i++){

              this.FileList[i].wait =true;

          }

        let promise = new Promise(function(resolve, reject) {

            _this.actionUrl=`/chaoyang/api/dailyInfo/createDailyInfo/${_id}`;

            _this.Aobject.name=_this.Name;//提交文件时候一并传递过 输入的标题文字

        

请问用element ui 怎么实现 一个接口上传多个文件呢?


叮当猫咪
浏览 12717回答 4
4回答

呼啦一阵风

change事件触发 把file对象添加到一个数组 然后最后上传 上传你的数组就好了(不一定数组 看你的数据格式定义)
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript