导入文件模板的组件

父组件中使用：

<file :kindId="kindId" @refresh="refresh"></file>

import file from './components/file.vue';
components: {
    file
  },
 data() {
    return {
      kindId: null, //种类di
    };
  },
methods: {
   // 刷新
    refresh() {
      this.page = 1;
      this.searchCtrl = false;
      this.getList();
    }
}

子组件：

 <div class="export-wrap">
    <el-upload
      class="upload-demo"
      action="#"
      :before-upload="handleBefore"
      :http-request="httpRequest"
      accept="xlsx"
    >
      <el-button size="small">
        <svg-icon iconClass="batchImport"></svg-icon>
        值班导入</el-button
      >
    </el-upload>
  </div>

import { uploadDutyUsersApi } from '@/http/dutyManage';//上传的接口
export default {
  props: {
    kindId: {
      type: String
    }
  },
  data() {
    return {
      msg: '',
      msgList: []
    };
  },
methods: {
    // 文件上传处理
    httpRequest(options) {
      let that = this;
      let fileFormData = new FormData();
      fileFormData.append('file', options.file, options.file.name);
      fileFormData.append('orgId', this.kindId);
      uploadDutyUsersApi(fileFormData).then(res => {
        if (res.data.code == 200) {
          let resdata = res.data.data;
          console.log(resdata, 'resdata');
          if (resdata.code == 'ok') {
            //上传成功
            that.$emit('refresh');
            this.msg = resdata.msg;
          } else if (resdata.code == 'error') {
            //上传失败，显示原因this.msgList = resdata.data;
          }
        }
      });
    },
    // 上传之前
    handleBefore(file) {
      const fileType = file.name
        .substring(file.name.lastIndexOf('.') + 1)
        .toLowerCase();
      const isExcel = fileType === 'xlsx';
      if (!isExcel) {
        this.$message.error('请上传xlsx类型文件');
        return false;
      }
    }
  }