element ui 上传文件，批量一次上传多个文件，为什么是发送了多次请求，我想一次请求，然后发送多个文件怎么实现呢？

Question

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

为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进去数据

          handleChange(res, file){ //未上传，但是选择了文件触发
              let Status=null;
             this.TitleNameDisplay=true;
             this.TitleName=res.name;
             this.Arraya=file;
             Status=this.wenjian(res.name);
             if(res.status == "ready"){ //刚刚添加文件
                 this.FileList.push({
                    name:res.name.substring(0, res.name.lastIndexOf(".")),
                    status:Status,
                    wait:false,
                    Success:false
                })
             }
             if(this.Name == null ||this.Name == undefined){
                 this.Name=this.FileList[0].name;
             }
            
      },
      
      当用户提交的时候执行了
            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;//提交文件时候一并传递过 输入的标题文字
        
               resolve();
        });
        promise.then(function() {
          _this.$refs.upload.submit();    
        });
        }

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

Answer 1

他这个是加一个就立刻上传了，你需要添加

handleUpload (file) {
                this.file = file;
                return false;
},

return false，并且得到file对象，手动拼到ajax的formData里面去，就可以实现一次全部上传了

Answer 2

您好，您可以尝试使用 ComponentOne .NET开发控件集 C1UpLoad，不用写任何代码，内置上传多个文件，但只发生一次请求的功能。

这里是示例，请查看

Answer 3

change事件触发 把file对象添加到一个数组 然后最后上传 上传你的数组就好了(不一定数组 看你的数据格式定义)

Answer 4

看官方文档upload组件部分。其中介绍一个属性 http-request 覆盖默认的上传行为，可以自定义上传的实现。

你把组件的action=“#”, 然后加 :http-request ="你的上传函数名"。 上传函数的回调函数里判断上传的文件数组是否为空，如果不是空，递归自己(上传文件函数)。每上传完一个文件，上传文件数组里就删除一个。