vue下载excel模板并提交数据

  • A+
所属分类:Web前端
摘要

  上一篇说了一下后端使用easyexcel处理excel然后进行入库的,这一篇我们就使用vue调用后端的接口吧!这里组件的话使用element的上传组件,下面有两种,我就用手动上传这种方式:

  上一篇说了一下后端使用easyexcel处理excel然后进行入库的,这一篇我们就使用vue调用后端的接口吧!这里组件的话使用element的上传组件,下面有两种,我就用手动上传这种方式:

vue下载excel模板并提交数据

 

  最后的画面如图所示:

vue下载excel模板并提交数据

 

 1.templage代码:

<template>   <div class='app-container'>     <el-form label-width="120px">       <el-form-item label="信息描述">         <el-tag type="info">excel模版说明:课程分类模板,用户必须按照这个模板进行填写</el-tag>         <br>         <el-tag>           <i class="el-icon-download" />           <!-- 这里的话可以把这个模板放到阿里的OSS中 -->           <a :href="downloadUrl">点击下载模版</a>         </el-tag>       </el-form-item>        <el-form-item label="选择Excel">         <el-upload ref="upload"                    :auto-upload="false"                    :on-success="fileUploadSuccess"                    :on-error="fileUploadError"                    :disabled="importBtnDisabled"                    :limit="1"                    :action="formSubmitFileUrl"                    name="file"                    accept="application/vnd.ms-excel">           <el-button slot="trigger"                      size="small"                      type="primary">选择上传文件</el-button>           <el-button :loading="loading"                      style="margin-left: 10px;"                      size="small"                      type="success"                      @click="submitUpload">上传到服务器</el-button>         </el-upload>       </el-form-item>     </el-form>   </div> </template>

 

 2.script代码:

export default {   data () {     // 这里存放数据     return {       importBtnDisabled: false, // 按钮是否禁用,       loading: false,       downloadUrl: "/static/test.xlsx",//excel模板文件,可以放到OSS中,也可以就放到vue项目中的static目录中,提供给用户下载       formSubmitFileUrl: process.env.BASE_API + "/edu/subject/addSubject"//调用后端解析excel的接口     }   },   methods: {     //上传到服务器,这里是vue中提交表单的写法this.$refs.upload.submit()     submitUpload () {       this.importBtnDisabled = true       this.loading = true       this.$refs.upload.submit()     },     //上传成功     fileUploadSuccess () {       this.loading = false       this.$message({         type: 'success',         message: '添加课程分类成功'       })       //导入成功之后跳转到课程列表界面       // this.$router.push({ path: '/edu/subject/list' })     },     //上传失败     fileUploadError () {       this.loading = false       this.$message({         type: 'error',         message: '导入文件失败'       })     }   }  }