iview-excel导入数据库数据

 

【前言】

    系统的开发，大部分都有批量导入数据库数据这个功能，毕竟这个系统的数据不能全靠数据库插入，并且最近正在做关于智能化工厂的系统，既然设计到了工厂，必不可少的需要批量导入员工，设备等信息，并且公司用的是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