vue + element ui 批量上傳

<el-dialog
            title="導入頁面"
            :visible.sync="mergeUploadDialogVisible"
            :destroy-on-close="true"
            width="30%"
        >
                <div>
                <el-upload
                  ref="uploadFile"
                  class="uploadTool"
                  drag
                  action=""
                  multiple
                  :file-list="uploadFileList"
                  accept=".xlsx"
                  :auto-upload="false"
                  :on-change="uploadChange"
                   >
                 <i class="el-icon-upload"></i>
                 <div class="el-upload__text">將文件拖到此處,或<em>點擊上傳</em></div>
                <div class="el-upload__tip" slot="tip">只能上傳excel文件</div>
               </el-upload>
            </div>

            <div class="buttonList">
                <el-button type="primary" @click="confirUpload" size="medium ">確定</el-button>
                <el-button type="info" @click="mergeUploadDialogVisible = false" size="medium ">取消</el-button>
            </div>
        </el-dialog>
 uploadChange(file,files){
            this.uploadFileList.push(file.raw);
         },
 confirUpload () {
              this.uploadFileList.map((el,index)=>{
                this.filedata.append(`file${index}`,el)
            });
              this.handleUploadSuccess();
           },
          handleUploadSuccess(){
             this.$sacpApis.uploadExcel(this.filedata).then(res => {
                if (res.success) {
                    this.$message.success('上傳成功')
                    let obj=this.$refs.uploadExcel
                    this.excelFile = '';
                    this.excelName = '';
                    let fileID={fileId:res.data[0].fileId}
                    this.uploadSuccessCB(fileID);
                }else{
                    let failInfo=res.resultInfo.statusText;
                     this.$message.error(failInfo);
                }
            }).catch(err=>this.$message.error(err)).finally(()=>{
                this.mergeUploadDialogVisible = false;
                this.dialogVisible = false;
            })
        },

入參:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章