分類管理-上傳分類前端

添加路由

{
  path: '/category',
  component: Layout,
  redirect: '/category/list',
  name: '視訊分類管理',
  meta: {title: '視訊分類管理', icon: 'el-icon-s-help'},
  children: [
    {
      path: 'list',
      name: '視訊分類清單',
      component: () => import('@/views/video/category/list'),
      meta: {title: '視訊分類清單', icon: 'table'}
    },
    {
      path: 'save',
      name: '上傳視訊分類',
      component: () => import('@/views/video/category/save'),
      meta: {title: '上傳視訊分類', icon: 'tree'}
    }
  ]
},      

完善上傳頁面，上傳頁面也就是所謂的添加頁面，現在大部分使用 excel 導緻的比較多，是以這次就采用 excel 導入上傳的形式來做添加，添加内容如下，添加了之後會報錯，因為方法還沒添加，不過沒什麼問題，先添加，添加完畢了之後緊接着就是去寫 excel 上傳解析接口了

<template>
  <div class="app-container">
    <el-form label-width="120px">
      <!--
      下載下傳 excel 模闆
      -->
      <el-form-item label="描述資訊">
        <el-tag type="info">excel模闆說明</el-tag>
        &nbsp;
        <el-tag>
          <i class="el-icon-download"></i>
          <a href="javascript:(0)">點選下載下傳模闆</a>
        </el-tag>
      </el-form-item>

      <!--
      上傳excel
      -->
      <el-form-item label="上傳資訊">
        <el-upload
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          accept=".xls, .xlsx"
          :limit="1"
          :disabled="btnDisabled"
          name="file"
        >
          <el-button slot="trigger" size="small" type="primary">選取檔案</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success"
                     @click="submitUpload">上傳到伺服器
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "save"
}
</script>

<style scoped>

</style>