鍍金池/ 問(wèn)答/HTML5  HTML/ element ui 上傳文件,批量一次上傳多個(gè)文件,為什么是發(fā)送了多次請(qǐng)求,我

element ui 上傳文件,批量一次上傳多個(gè)文件,為什么是發(fā)送了多次請(qǐng)求,我想一次請(qǐng)求,然后發(fā)送多個(gè)文件怎么實(shí)現(xiàn)呢?

想要的效果是 用戶一次選擇的文件一個(gè)接口上傳完畢,但是element ui 里面是上傳了多次一次一個(gè)文件的形式上傳的

clipboard.png

clipboard.png

為4參數(shù)的接口調(diào)用了 多次執(zhí)行的上傳,我想上傳一次 多個(gè)文件的 怎么實(shí)現(xiàn)呢?

因?yàn)閑lement ui 里面的列表和我們的需求不一致 我重寫了一個(gè)列表

            <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>點(diǎn)擊上傳</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 是用戶每次選擇文件的時(shí)候我push進(jìn)去數(shù)據(jù)

          handleChange(res, file){ //未上傳,但是選擇了文件觸發(fā)
              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;
             }
            
      },
      
      當(dāng)用戶提交的時(shí)候執(zhí)行了
            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;//提交文件時(shí)候一并傳遞過(guò) 輸入的標(biāo)題文字
        
               resolve();
        });
        promise.then(function() {
          _this.$refs.upload.submit();    
        });
        }


請(qǐng)問(wèn)用element ui 怎么實(shí)現(xiàn) 一個(gè)接口上傳多個(gè)文件呢?

回答
編輯回答
孤慣
change事件觸發(fā) 把file對(duì)象添加到一個(gè)數(shù)組 然后最后上傳 上傳你的數(shù)組就好了(不一定數(shù)組 看你的數(shù)據(jù)格式定義)
2017年4月21日 08:19
編輯回答
純妹

他這個(gè)是加一個(gè)就立刻上傳了,你需要添加

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

return false,并且得到file對(duì)象,手動(dòng)拼到ajax的formData里面去,就可以實(shí)現(xiàn)一次全部上傳了

2017年8月20日 15:35
編輯回答
陪妳哭

您好,您可以嘗試使用 ComponentOne .NET開發(fā)控件集 C1UpLoad,不用寫任何代碼,內(nèi)置上傳多個(gè)文件,但只發(fā)生一次請(qǐng)求的功能。

這里是示例,請(qǐng)查看

2017年3月9日 18:59
編輯回答
不二心

看官方文檔upload組件部分。其中介紹一個(gè)屬性 http-request 覆蓋默認(rèn)的上傳行為,可以自定義上傳的實(shí)現(xiàn)。

你把組件的action=“#”, 然后加 :http-request ="你的上傳函數(shù)名"。 上傳函數(shù)的回調(diào)函數(shù)里判斷上傳的文件數(shù)組是否為空,如果不是空,遞歸自己(上傳文件函數(shù))。每上傳完一個(gè)文件,上傳文件數(shù)組里就刪除一個(gè)。

2018年5月25日 20:06