【前言】
系统的开发,大部分都有批量导入数据库数据这个功能,毕竟这个系统的数据不能全靠数据库插入,并且最近正在做关于智能化工厂的系统,既然设计到了工厂,必不可少的需要批量导入员工,设备等信息,并且公司用的是iview组件实现的开发,这个号称可以和苹果系统的组件开发一样精致化的高质量组件库,可以帮助我们实现既简单,又高效,并且美观的导入效果,下面我们来看看前后端是怎么实现的吧。
【前端】
1.引入组件
<Button for="id" type="primary" icon="ios-cloud-upload-outline" @click="$refs.file.click()">用户导入</Button>
<form method="post" enctype="multipart/form-data" name="form1" >
<input id="inputFile" type="file" ref="file" style="display:none" accept=".xls,.xlsx" @change="getFile($event)">
</form>
2.调用后端接口的方法。
//批量导入用户方法
getFile(event) {
this.isprocess=true;
this.file = event.target.files[0];
var url = axios.defaults.baseURL;
event.preventDefault();
let formData = new FormData();
formData.append('file', this.file);
var vm = this;
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post(vm.apiUrl + '/upload',formData, config).the