vue+element-ui实现前端导入excel数据

element-ui有直接封装好的Upload组件，直接使用很方便

<el-upload
       class="upload-demo"
       action=""
       accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
       :before-remove="beforeRemove"
       :http-request="uploadFile"
       multiple
       :limit="1"
       :on-exceed="handleExceed"
       :file-list="fileList">
       <el-button size="small" type="primary" @click="handlePreview">点击上传</el-button>
       <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
</el-upload>

accept 打开指定文件类型

 // 自定义上传 导入数据
            uploadFile (item) {
                const form = new FormData();
                form.append('token', this.token);
                form.append('file1', item.file);
                updateFile(form).then(res => {
                    let data = res.data;
                    if (data.code == 600) {
                        login(this.$message, this.$router);
                    }
                    if(data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '导入成功!'
                        });
                        this.getUser(); //导入成功刷新列表
                        this.addFormVisible = false;
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.msg
                        });
                    }
                }).catch(err => {
                })
            }

在api文件封装请求函数

export const updateFile = params => {
    return axios.post(`${base}/shopBaby/file`, params);
}