Important description at the head:
Cannot add disabled otherwise it cannot prevent the selection file box from popping up
Cannot be added disabled Otherwise, the built-in method for deleting files cannot be used normally
Vue file
`<el-upload class="upload-demo" ref="uploadH" :on-exceed="handleExceed" action="" :limit="1" :file-list="fileList" :on-change="handleChange" :on-remove="remove" :auto-upload="false"> <el-button slot="trigger" @click. Stop ="clickSubmit"> </el-button> <el-button type="primary" @click="exportItem" style="margin-left: 10px;" </el-button> </el-upload>Copy the code`
methods
HandleExceed (files, fileList) {this.$popError(' Upload only one file ') return false}, handleChange(file, fileList) {if (! this.$uploadLimit(file, 10, ['.xlsx', '.xls'])){ fileList.pop() } this.fileList = fileList }, remove(file, fileList) { console.log(fileList) this.fileList = fileList }, submitUpload(){ if (this.fileList.length > 0 && this.fileList[0].raw) { this.uploading = true const parmas = new FormData() parmas.append('file', this.fileList[0].raw) parmas.append('projectId', 0) parmas.append('matterType', this.typeFrom.toUpperCase()) this.$http.importItem(parmas).then(res => { this.uploading = false if (res.data.code == $importDialog = false} else {this.$popError(res.data.message)}}, // exportItem(){this.$bn_confirm({MSG: 'exportItem ', des: 'will export template'}, (the instance, done) = > {instance. ConfirmButtonLoading = true const params = {projectId: 0, matterType: this.typeFrom.toUpperCase() } this.exportTemplate(params).then(res => { done() instance.confirmButtonLoading = false const blob = new Blob([res.data]) const name = 'template.xlsx' this.$download(blob, name) }) }) }, clickSubmit(){ //self.$refs['upload'].$refs['upload-inner'].handleClick() if(this.fileList.length>0){ This.$popError(' Select only one file! ') return; }else{ this.$refs['uploadH'].$refs['upload-inner'].handleClick() } },Copy the code