elementui 按钮 表单_前后端分离，文件上传下载（springBoot+vue+elementUI）

1.介绍

本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都是可以上传下载的,前端就是一个页面,后端就是一个controller页面,就可以解决

1.1前端样子

2.前端

2.1先分享一下前端的全部代码

<template>  <div>    <center>    center>    <div style="float: left;margin-left: 100px">      <el-button type="primary"  v-on:click="tocustomQuery" >上一步el-button>    div>    <div style="float: right;margin-right: 100px">      <el-button type="primary"  v-on:click="saveResource" >保存el-button>    div>        <br>        <h1>基本信息设置h1>    <br>    <br>    <center>    <div style="margin-right: 170px">  <el-form ref="form" :model="form" label-width="120px" >    <el-form-item label="报表名称中文:" style="width: 470px;">      <el-input v-model="form.reportName" >el-input>    el-form-item>    <el-form-item label="报表名称英文:" style="width: 470px;">      <el-input v-model="form.reportEnName">el-input>    el-form-item>    <el-form-item label="报表名称中英文:" style="width: 470px;">      <el-input v-model="form.reportChEnName">el-input>    el-form-item>    <el-form-item label="报表备注:" style="width: 470px;">      <el-input v-model="form.remarks">el-input>    el-form-item>    <el-form-item label="功能编号" style="width: 470px;">      <el-input v-model="form.code" >el-input>    el-form-item>    <el-form-item label="编辑模板:" style="width: 570px;">      <el-input placeholder="模板地址" style="width: 200px" disabled>el-input>      <el-upload class="upload-demo"                 :action="uploadUrl"                 :before-upload="handleBeforeUpload"                 :on-error="handleUploadError"                 :before-remove="beforeRemove"                 multiple                 :limit="5"                 :on-exceed="handleExceed"                 :file-list="fileList">        <el-button size="small" type="primary">点击上传el-button>      el-upload>      <a href="http://localhost:8080/file/download?fileName=test.xls">下载附件a>    el-form-item>    <el-form-item label="模板备注:"  style="width: 480px;">      模板用于下载，打印EXCEL时使用。其中{ {CURRENT_USER} }表示当前用户名，      { {TITLE} }表示表头，{ {DATA} }表示数据行，{ {FOOTER} }表示页脚区域。      导出的内容不可改动，页眉页脚区域可以自由编辑。    el-form-item>    <el-form-item >      <el-select v-model="form.isPublic" style="width: 350px;">        <el-option label="私有查询" value="2" >el-option>        <el-option label="公共查询" value="1">el-option>      el-select>    el-form-item>    <el-form-item >        <el-checkbox label="是否打印" v-model="form.isPrinting" true-label="1" false-label="2">el-checkbox>        <el-checkbox label="是否导出" v-model="form.isExport" true-label="1" false-label="2">el-checkbox>      <el-form-item  type="hidden" style="width: 470px;">      el-form-item>    el-form-item>  el-form>    div>    center>  div>template><script>import axios from 'axios'import { uuid } from 'vue-uuid';export default {
      data() {
        return {
          form: {
            reportName:'',        reportEnName:'',        reportChEnName:'',        remarks:'',        code:'',        isPublic:'1',        isPrinting:"1",        isExport:"1",        datas:[{},{},{},{}],        A0010011:'',        A0010012:'',        A0010013:'',        A0010014:'',      },      // uuid1:'',      // cusList:{},      uploadUrl: 'file/upload',      fileList: [],    }  },  created() {
        console.log("上个页面传来的是",sessionStorage)    // this.handleUUIDv1()    this.form.code = this.$uuid.v1()    console.log("页面刷新后新产生的uuid是",this.form.code)   },  watch:{
        reportName: function (newVal,oldVal) {
    //新值和原值      console.log("name改变了 a:"+newVal+"    b:"+oldVal)    }  },  methods: {
        //使用uuid    // handleUUIDv1() {
        //   this.uuid1 = this.$uuid.v1()    // },    //点击多选按钮true和false变成1或者2    reset(form){
          this.$refs['form'].resetFields();    },    //获取上个页面传来的数据    getcustomQuery() {
          let reportName=this.form.reportName      sessionStorage.setItem("reportName",reportName)      let reportEnName = this.form.reportEnName      sessionStorage.setItem("reportEnName",reportEnName)      let reportChEnName = this.form.reportChEnName      sessionStorage.setItem("reportChEnName",reportChEnName)      let remarks = this.form.remarks      sessionStorage.setItem("remarks",remarks)      let code = this.form.code      sessionStorage.setItem("code",code)      let isPublic = this.form.isPublic      sessionStorage.setItem("isPublic",isPublic)      let isPrinting = this.form.isPrinting      sessionStorage.setItem("isPrinting",isPrinting)      let isExport = this.form.isExport      sessionStorage.setItem("isExport",isExport)      console.log("上个页面传来的是",sessionStorage)    },