前端实现Excel文档上传

HTML结构

form表单中，写部门和科目，用upload包裹button写一个导入按钮

<el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
      <el-form-item label="部门：" prop="gradeLevel" required>
        <el-select v-model="form.gradeLevel" placeholder="部门"  @change="levelChange" clearable>
          <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="科目：" prop="subjectId" required>
        <el-select v-model="form.subjectId" placeholder="科目" >
          <el-option v-for="item in subjectFilter" :key="item.id" :value="item.id" :label="item.name+' ( '+item.levelName+' )'"></el-option>
        </el-select>
      </el-form-item>
      <!-- 导入文件 -->
      <el-form-item>
        <el-upload
          style="display: inline-block"
          action="string"
          :limit="1"
          :file-list="fileList"
          :on-error="loadFileError"
          :on-success="loadFileSuccess"
          :before-upload="beforeUpload"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :http-request="uploadFile"
          >
            <el-button type="success">导入</el-button>
        </el-upload>
        <!--  action必填参数，上传地址string类型
             limit: 代表一次可上传的文件数量
             file-list： 代表自己定义的属性
             on-error： 代表导入文件失败的时候提示的方法
             on-success：代表导入文件成功提示的方法
             before-upload：代表在上传前检查文件的格式、数据大小、信息等，判定文件是否能够上传
             show-file-list：代表是否显示文件列表，false不显示 
             http-request：本次用来进行上传给后端的方法
        -->
        <!-- <el-button type="primary" @click="submitForm">提交</el-button> -->
      </el-form-item>
    </el-form>

data配置

定义fileList存储upload标签中导入的数据

data () {
    return {
      fileList: [], // 导入的文件
      form: {
        id: null,
        gradeLevel: null,//部门
        subjectId: null,//科目id
      },
      subjectFilter: null,//科目
      formLoading: false,
      rules: {//表单验证规则
        gradeLevel: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        subjectId: [
          { required: true, message: '请选择科目', trigger: 'change' }
        ],
      },
    }
  },

methods方法

配置upload标签中对应的各个方法

 methods: {
    // 导入失败，其中$message为elementui的消息提醒组件
    loadFileError() {
      this.$message({
        message: "文件上传失败!",
        type: "error",
      });
    },
    //导入成功提示
    loadFileSuccess() {
      this.$message({
        message: "文件上传成功!",
        type: "success",
      });
    },
    // 导入前检查文件
    beforeUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!extension && !extension2) {
        this.$message({
          message: "上传模板只能是 xls、xlsx格式!",
          type: "error",
        });
      }
      if (!isLt2M) {
        console.log("上传模板大小不能超过 2MB!");
        this.$message({
          message: "上传模板大小不能超过 2MB!",
          type: "error",
        });
      }
      return extension || extension2 || isLt2M;
    },
    uploadFile () {
      let _this = this
      //表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          //上传接口携带三个参数（部门，科室，数据）
            questionApi.uploadQuestion(this.form.gradeLevel, this.form.subjectId, formDataInfo).then(re => {
            if (re.code === 1) {
              _this.$message.success(re.message)
              //成功后跳转路由，按需求写
              _this.$router.push('/education/question/list')
              })
            } else {
              _this.$message.error(re.message)
              this.formLoading = false
            }
          }).catch(e => {
            this.formLoading = false
          })
        } else {
          return false
        }
      })
    },
}

接口配置

定义post请求

const post = function (url, params) {
  const query = {
    baseURL: process.env.VUE_APP_URL,
    url: url,
    method: 'post',
    withCredentials: true,
    timeout: 30000,
    data: params,
    headers: { 'Content-Type': 'application/json', 'request-ajax': true }
  }
  return request(false, query)
}

定义接口
后端给的接口，前端的两种写法
/api/admin/question/import/{departmentId}/{subjectId}

uploadQuestion: (departmentId, subjectId, data) => post('/api/admin/question/import/' + departmentId + '/' + subjectId, data),//题库导入,拼串写法
uploadQuestion: (departmentId, subjectId, data) => post(`/api/admin/question/import/${departmentId}/${subjectId}` ,data),//题库导入,模板字符串写法