一、Excel模板
1、编辑Excel模板2、将文件上传至阿里云OSS
二、配置路由
1、添加路由
// 课程分类管理
{
path: '/edu/subject',
component: Layout,
redirect: '/edu/subject/list',
name: 'Subject',
meta: { title: '课程分类管理', icon: 'nested' },
children: [
{
path: 'list',
name: 'EduSubjectList',
component: () => import('@/views/edu/subject/list'),
meta: { title: '课程分类列表' }
},
{
path: 'import',
name: 'EduSubjectImport',
component: () => import('@/views/edu/subject/import'),
meta: { title: '导入课程分类' }
}
]
},
2、添加vue组件
三、表单组件import.vue1、js定义数据
2、template
点击下载模版
<el-upload
ref="upload"
:auto-upload="false"
:on-success="fileUploadSuccess"
:on-error="fileUploadError"
:disabled="importBtnDisabled"
:limit="1"
:action="BASE_API+'/admin/edu/subject/import'"
name="file"
accept="application/vnd.ms-excel">
<el-button
:loading="loading"
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload">{{ fileUploadBtnText }}
3、js上传方法
methods: {
submitUpload() {
this.fileUploadBtnText = '正在上传'
this.importBtnDisabled = true
this.loading = true
this.$refs.upload.submit()
},
fileUploadSuccess(response) {
},
fileUploadError(response) {
}
}
4、回调函数
fileUploadSuccess(response) {
if (response.success === true) {
this.fileUploadBtnText = '导入成功'
this.loading = false
this.$message({
type: 'success',
message: response.message
})
}
},
fileUploadError(response) {
this.fileUploadBtnText = '导入失败'
this.loading = false
this.$message({
type: 'error',
message: '导入失败'
})
}