重要的描述放在头部:
<el-button>不可添加disabled 否则不能阻止选择文件框弹出
<el-upload>不可添加disabled 否则无法正常时候自带的删除文件方法
vue文件
`<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>
`
methods
handleExceed(files, fileList) {
this.$popError('只能上传单个文件')
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 == 200){
this.$popSuccess('上传成功')
this.importDialog = false
} else {
this.$popError(res.data.message)
}
})
}
},
// 导出模板
exportItem(){
this.$bn_confirm({
msg: '导出',
des: '将要导出模板'
}, (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('只能选取一个文件!')
return;
}else{
this.$refs['uploadH'].$refs['upload-inner'].handleClick()
}
},