課程分類導入前端實現

一 導入課程分類需求

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() // 清空文件列表
    }
  }