美文网首页web开发
vue + element ui 批量上传

vue + element ui 批量上传

作者: 1994陈 | 来源:发表于2020-06-15 15:20 被阅读0次
    <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

    相关文章

      网友评论

        本文标题:vue + element ui 批量上传

        本文链接:https://www.haomeiwen.com/subject/ugthxktx.html