<template>
<div>
<el-upload
class="upload-demo"
ref="upload"
:on-change="handleChange" {/*文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用*/}
:file-list="fileList"
:limit="1" {/*控制上传最大数量1*/}
drag
action="http://localhost:8077/" {/*上传到后台的接口地址*/}
accept=".xlsx,.xls" {/*支持的文件类型*/}
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传Excel文件,格式xls、xlsx</div>
</el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
</div>
</template>
<script>
export default {
name: 'submitUpload',
data(){
return{
fileList:[]
}
},
methods: {
submitUpload:function(){
// submit()手动上传文件列表
this.$refs.upload.submit()
},
handleChange:function(file,fileList) {
this.fileList=[{name:'已上传文件'}]
}
}
}
</script>
前端效果如图