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

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


       点击上传
       
只能上传Excel文件
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);
}

 

你可能感兴趣的:(vue+element-ui实现前端导入excel数据)