一 导入课程分类需求
1 导入课程分类
2 课程分类列表
二 Excel模板上传
1 编辑Excel模板
2 将文件上传到阿里云OSS
三 路由和组件
1 添加vue组件
2 添加路由
// 课程分类管理
{
path: '/subject',
component: Layout,
redirect: '/subject/list',
name: 'Subject',
meta: { title: '课程分类管理' },
children: [
{
path: 'list',
name: 'SubjectList',
component: () => import('@/views/subject/list'),
meta: { title: '课程分类列表' }
},
{
path: 'import',
name: 'SubjectImport',
component: () => import('@/views/subject/import'),
meta: { title: '导入课程分类' }
}
]
},
四 import.vue组件
1 添加配置
config/dev.env.js中添加阿里云oss bucket地址,注意:修改后重启前端服务器
OSS_PATH: '"https://gulimall-cakin.oss-cn-chengdu.aliyuncs.com"'
2 js定义数据
data() {
return {
defaultExcelTemplate: process.env.OSS_PATH + '/excel/课程分类列表模板.xls', // 默认Excel模板
importBtnDisabled: false // 导入按钮是否禁用
}
},
3 模板
<template>
<div class="app-container">
<el-form label-width="120px">
<!-- 下载模板区 -->
<el-form-item label="下载模板">
<el-tag type="info">excel模版说明</el-tag>
<el-tag>
<i class="el-icon-download"/>
<a :href="defaultExcelTemplate">点击下载模版</a>
</el-tag>
</el-form-item>
<!-- 上传文件区 -->
<el-form-item label="选择Excel">
<!--
ref:组件命名
auto-upload:不自动上传
on-exceed:文件限制
on-success:成功回调
on-error:失败回调
limit:文件上传限制
action:上传URL地址
name:前后端对接文件名
accept:上传文件类型
-->
<el-upload
ref="upload"
:auto-upload="false"
:on-exceed="fileUploadExceed"
:on-success="fileUploadSuccess"
:on-error="fileUploadError"
:limit="1"
action="http://127.0.0.1:8110/admin/edu/subject/import"
name="file"
accept="application/vnd.ms-excel">
<!-- 选择文件按钮 -->
<el-button
slot="trigger"
size="small"
type="primary">选取文件</el-button>
<!-- 上传文件按钮 -->
<el-button
:disabled="importBtnDisabled"
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload()">导入</el-button>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
4 js上传方法
methods: {
// 当选择文件超出约定数量时触发
fileUploadExceed() {
this.$message.warning('只能选取一个文件')
},
// 执行上传
submitUpload() {
this.importBtnDisabled = true // 禁用按钮
this.$refs.upload.submit() // 手动表单提交
},
// 上传成功的回调
fileUploadSuccess(response) {
if (response.success) {
this.importBtnDisabled = false // 启用按钮
this.$message.success(response.message)
this.$refs.upload.clearFiles() // 清空文件列表
} else {
this.$message.error('上传失败! (非20000)')
}
},
// 上传失败的回调
fileUploadError() {
this.importBtnDisabled = false // 启用按钮
this.$message.error('上传失败! (http失败)')
this.$refs.upload.clearFiles() // 清空文件列表
}
}