前端传excel给后端

image.png

<div class="import-right">
    <el-button size="medium" type="primary" class="button-query" @click="importFile">导入文件</el-button>
    <el-button size="medium" class="button-query">
        // 此方法是把后台定义好的模板直接放到根目录下，再点击下载
       <a :href="`${publicPath}util/xls/导入医保医生对照模板.xlsx`">下载模板</a>
       // 此方法是调接口获取表格模板
      <a :href="excelTemplatePath">下载导入表格</a>
    </el-button>
</div>

<el-drawer
      title="xxx"
      :visible.sync="docImportDrawer"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="20%"
      @close="importForm.imFileList=[]">
      <div class="demo-drawer__content">
        <el-form :model="importForm" :rules="improtRules" ref="importForm">
          <el-form-item label="上传文件" label-width="100px" prop="fileList">
            <el-upload
            class="uploader"
            action=""
            :limit="1"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :file-list="importForm.fileList"
            :auto-upload="false"
            :on-change="importFileChange">
            <i class="el-icon-plus"></i>
          </el-upload>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer btn-style">
          <el-button @click="docImportDrawer = false">取 消</el-button>
          <el-button type="primary" @click="saveUpload">上 传</el-button>
        </div>
      </div>
    </el-drawer>

data(){
  importForm: {
     fileList: [],
  },
  docImportDrawer: false,
  improtRules: {
        fileList: [
          { required: true, message: '请导入Excel文件', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (!value.length) {
                callback(new Error('请导入Excel文件'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ]
      },
    // 文件模板手添加到根目录下
    publicPath: process.env.BASE_URL, // public文件夹路径
    excelTemplatePath: '', // 数据导入Excel模板下载地址 - 调接口获取
}，
methods:{
  // 导入弹框
    importFile() {
      this.docImportDrawer = true
    },
  // 数据导入-上传Excel
    async importFileChange (file, fileList) {
      this.importForm.fileList = fileList // 检验上传文件是否为空
    },
    // 确定上传
    saveUpload() {
      this.$refs.importForm.validate(async isValid => {
        if (!isValid) return
        try {
          // 主要是这二行代码
          const params = new FormData()
          params.append('file', this.importForm.fileList[0].raw)

          this.isLoadingDialog = true
          await this.$requestInternet.post('/api/xxx', params)
          this.$message.success('模板导入成功')
          this.docImportDrawer = false
        } finally {
          this.isLoadingDialog = false
        }
      })
    }，

    // 数据导入-获取Excel模板地址
    getExcelTemplatePath() {
      this.$requestInternet.get('/api/xxx').then(res => {
        this.excelTemplatePath = res
      })
    },
}