一、Excel模板

1、编辑Excel模板

2、将文件上传至阿里云OSS

673ed30a-365a-42b5-9143-e8b44fd15cfc.png

二、配置路由

1、添加路由

  1. // 课程分类管理
  2. {
  3.   path: '/edu/subject',
  4.   component: Layout,
  5.   redirect: '/edu/subject/list',
  6.   name: 'Subject',
  7.   meta: { title: '课程分类管理', icon: 'nested' },
  8.   children: [
  9.     {
  10.       path: 'list',
  11.       name: 'EduSubjectList',
  12.       component: () => import('@/views/edu/subject/list'),
  13.       meta: { title: '课程分类列表' }
  14.     },
  15.     {
  16.       path: 'import',
  17.       name: 'EduSubjectImport',
  18.       component: () => import('@/views/edu/subject/import'),
  19.       meta: { title: '导入课程分类' }
  20.     }
  21.   ]
  22. },

2、添加vue组件

fbe0bab6-b35d-4347-80bd-9a24e03c7031.png

三、表单组件import.vue

1、js定义数据

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       BASE_API: process.env.BASE_API, // 接口API地址
  6.       OSS_PATH: process.env.OSS_PATH, // 阿里云OSS地址
  7.       fileUploadBtnText: '上传到服务器', // 按钮文字
  8.       importBtnDisabled: false, // 按钮是否禁用,
  9.       loading: false
  10.     }
  11.   }
  12. }
  13. </script>

2、template

  1. <template>
  2.   <div class="app-container">
  3.     <el-form label-width="120px">
  4.       <el-form-item label="信息描述">
  5.         <el-tag type="info">excel模版说明</el-tag>
  6.         <el-tag>
  7.           <i class="el-icon-download"/>
  8.           <a :href="OSS_PATH + '/excel/%E8%AF%BE%E7%A8%8B%E5%88%86%E7%B1%BB%E5%88%97%E8%A1%A8%E6%A8%A1%E6%9D%BF.xls'">点击下载模版</a>
  9.         </el-tag>
  10.       </el-form-item>
  11.       <el-form-item label="选择Excel">
  12.         <el-upload
  13.           ref="upload"
  14.           :auto-upload="false"
  15.           :on-success="fileUploadSuccess"
  16.           :on-error="fileUploadError"
  17.           :disabled="importBtnDisabled"
  18.           :limit="1"
  19.           :action="BASE_API+'/admin/edu/subject/import'"
  20.           name="file"
  21.           accept="application/vnd.ms-excel">
  22.           <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  23.           <el-button
  24.             :loading="loading"
  25.             style="margin-left: 10px;"
  26.             size="small"
  27.             type="success"
  28.             @click="submitUpload">{{ fileUploadBtnText }}</el-button>
  29.         </el-upload>
  30.       </el-form-item>
  31.     </el-form>
  32.   </div>
  33. </template>

3、js上传方法

  1. methods: {
  2.     submitUpload() {
  3.       this.fileUploadBtnText = '正在上传'
  4.       this.importBtnDisabled = true
  5.       this.loading = true
  6.       this.$refs.upload.submit()
  7.     },
  8.     fileUploadSuccess(response) {
  10.     },
  11.     fileUploadError(response) {
  13.     }
  14. }

4、回调函数

  1. fileUploadSuccess(response) {
  2.     if (response.success === true) {
  3.     this.fileUploadBtnText = '导入成功'
  4.     this.loading = false
  5.     this.$message({
  6.         type: 'success',
  7.         message: response.message
  8.     })
  9.     } 
  10. },
  11. fileUploadError(response) {
  12.     this.fileUploadBtnText = '导入失败'
  13.     this.loading = false
  14.     this.$message({
  15.     type: 'error',
  16.     message: '导入失败'
  17.     })
  18. }