一、Excel模板

1、编辑Excel模板

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

image.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. ]
  23. },

2、添加vue组件

三、表单组件import.vue

1、js定义数据

  2. <script>
  3. export default {
  5.   data() {
  6.     return {
  7.       BASE_API: process.env.BASE_API, // 接口API地址
  8.       OSS_PATH: process.env.OSS_PATH, // 阿里云OSS地址
  9.       fileUploadBtnText: '上传到服务器', // 按钮文字
  10.       importBtnDisabled: false, // 按钮是否禁用,
  11.       loading: false
  12.     }
  13.   }
  14. }
  15. </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>
  12.       </el-form-item>
  15.       <el-form-item label="选择Excel">
  16.         <el-upload
  17.           ref="upload"
  18.           :auto-upload="false"
  19.           :on-success="fileUploadSuccess"
  20.           :on-error="fileUploadError"
  21.           :disabled="importBtnDisabled"
  22.           :limit="1"
  23.           :action="BASE_API+'/admin/edu/subject/import'"
  24.           name="file"
  25.           accept="application/vnd.ms-excel">
  26.           <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  27.           <el-button
  28.             :loading="loading"
  29.             style="margin-left: 10px;"
  30.             size="small"
  31.             type="success"
  32.             @click="submitUpload">{{ fileUploadBtnText }}</el-button>
  33.         </el-upload>
  34.       </el-form-item>
  35.     </el-form>
  36.   </div>
  38. </template>

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: '导入失败'
 })
}