vue.js+elementUI文件上传、文件导入、文件下载

<el-button plain @click ="exportVmExcel()" size='mini' icon="el-icon-download" style="margin-left:10px;">模板下载</el-button>exportVmExcel() {
var language = i18n.locale;
console.log("language==="+language);
//模板下载
Api.templateDownload(language).then(res => {
if (res) {
self.handlerDownloadResult({
res: res,
optionType: "vm-template"
});
}
})},//API写法，用户模板下载
templateDownload(language) {
return axios({
method: 'get',
url: '/api/vmachine/download/template?language='+language,
responseType: 'blob'
})
},

<el-button size='mini' @click="chooseFile" ref="upload"> <i class="fa fa-share" > </i>&nbsp;&nbsp;{{$t('导入')}}</el-button>
<input type="file" v-if = "ishowFile" style="display: none" name ="attence" @change="changeFile($event)" ref ="attenceInput" aria-hidden="true">
<input type="file" style="display: none" name ="attence" @change="changeFile($event)" ref ="attenceInput" aria-hidden="true">//批量导入，选择文件
chooseFile(){
let isTerminal = this.selectTenant
if(isTerminal){
if(this.jumpOrDialog.tenantId == ''){
this.$message({
message: this.$t('text.vmValidates.message6'),
type: "warning"
});
return
}
}
this.$refs.attenceInput.click();
this.ishowFile = false // 销毁
},
changeFile(val){
this.quantityImport(val)
},
quantityImport(val){
let isLt5M = val.target.files[0].size / 1024 / 1024 <= 5;
this.selectedFile = val.target.files[0];
if (this.isExcel() == true && isLt5M == true) {
let isTerminal = this.selectTenant;
let tenantId = '';
let tenantName = '';
if(isTerminal){
tenantId = this.jumpOrDialog.tenantId
tenantName = this.jumpOrDialog.tenantName
}else{
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
tenantId = userInfo.tenantId
tenantName = userInfo.tenantName
}
let vmData = {
tenantId: tenantId,
pageNum: this.pageNum,
pageSize: this.pageSize
}
let formdata = new FormData();
formdata.append('file', this.selectedFile);
var map = {
formdata:formdata,
}
Api.batchImport(map,tenantId,tenantName,this.createUserId,this.createUserName).then(res => {
if(res.status == '200'){
this.$message.success(this.$t('112.uploadSuccess'));
this.getAllVmRegister(vmData)
this.selectedFile = ""
this.ishowFile = true
}else{
this.$message({
message: this.$t('264845'),
type: "error",
showClose: true,
duration:6000,
});
// this.$message.error(this.$t('ploadFailue'));
this.getAllVmRegister(vmData)
}
}).catch( re => {
if(re.response.data.code == '110'){
var errMessages1 = re.response.data.message;
this.$message({
type: 'error',showClose: true,duration:6000,
message: this.$t('1352.79865.23)
});
}else{
this.$message({
type: 'error',showClose: true,duration:6000,
message: this.$t('15973')
});
}
})
}
this.selectedFile = ""
this.ishowFile = true
},
isExcel() {
let self = this;
let filename = self.selectedFile.name;
let arr = filename.split('.');
if (arr[1] !== 'xls') {
console.log(this.$t('12356'));
this.$message({
message: this.$t('123123'),
type: "error",
showClose: true,
duration:6000,
}); return false;
} else {
return true;
}
},

batchImport: (data,tenantId,tenantName,createUserId,createUserName) => {
return axios({
method: 'post',
header: {
"Content-Type": "multipart/form-data",
},
url:`/api/vmachine/register/batch?` +'tenantId='+tenantId+'&tenantName='+tenantName+'&createUserId='+createUserId+'&createUserName='+createUserName,
data: data.formdata
})
},