web开发

vue + element ui 批量上传

2020-06-15  本文已影响0人  1994陈
<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;
            })
        },

入参:


image.png
上一篇 下一篇

猜你喜欢

热点阅读