Element ui upload files, batch upload multiple files, why send multiple requests, I think a request, and then send multiple files how to achieve?

the desired effect is that the file selected by the user is uploaded one interface at a time, but the element ui is uploaded in the form of one file at a time

clipboard.png

clipboard.png

the API with 4 parameters has been called for many times to upload. I want to upload more than one file at a time.

because the list in element ui is inconsistent with our requirements, I rewrote a list 

            <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: -sharp01C001;" v-if="item.Success"></i>
            </li>
        </ul>

FileList is when I push the data every time the user selects a file 

          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;iPP){
              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();    
        });
        }

how can I use element ui to upload multiple files on one interface?

Html5 html css javascript
May.29,2021

he uploaded it immediately after adding one. You need to add

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

return false, and get the file object, manually spell it into the formData of ajax, and upload it all at once

Hello, you can try to use ComponentOne .NET development control set C1UpLoad, without writing any code, built-in ability to upload multiple files, but only one request occurs.

here is the example , please see

The
change event triggers to add file objects to an array and finally upload your array (not necessarily the array depends on your data format definition)

see the upload components section of the official document. It introduces an attribute http-request that overrides the default upload behavior, and you can customize the upload implementation.

you put the action= "- sharp" of the component, and then add: http-request = "your upload function name". The callback function of the upload function determines whether the uploaded file array is empty, and if not, recursively (upload file function). Every time a file is uploaded, one is deleted from the uploaded file array.

Previous: How is the. temp folder generated in the weex project

Next: The lazy loading component of v-lazy pictures in mint-ui in vue cannot be configured.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3781e-34467.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3781e-34467.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?