html部分: 结合input标签
<div class="panel-btn btn-box">
<el-button
class="audit-btn"
size="mini"
:loading="importLoading">导 入
</el-button>
<input
class="import-input-file"
:disabled="!manipulationFrom.zoneType"
@change="e => {importData(e)}"
accept="*.zip"
type="file"
name="file"></input>
</div>
css部分: 隐藏input标签,自定义按钮样式
.btn-box {
position: relative;
.import-input-file {
opacity: 0;
position: absolute;
top: -1px;
left: -1px;
width: 70px;
height: 33px;
font-size:0;
cursor: pointer;
}
}
js部分
//导入数据
importData(e){
const files = Array.from(e.target.files)
if (files && files.length) {
files.forEach(file => {
const testmsg = /^.+(\.zip)$/.test(file.name);
if (!testmsg) {
this.$message.warning("只能上传zip文件!");
return false;
}
this.importLoading = true
let formData = new FormData();
formData.append('file', file);
formData.append('forestBaseId', this.curBase.id);
formData.append('zoneType', this.manipulationFrom.zoneType);
//调用导入接口
importSideFile(formData).then(res => {
if(res && res.status === 200){
this.$message.success('导入成功')
}
this.importLoading = false
})
});
}
}