在vue中实现excel表格导入

#在vue中实现excel表格导入

导入按钮

<el-tab-pane name="explains" label="导入">
    <el-button size="small" type="primary" @click="showImport = true">导入</el-button>
</el-tab-pane>

点击导入后的弹窗

<el-dialog title="导入" :visible.sync="showImport" width="550px">
   <el-input class="upload" v-model="filePath">
     <el-button>
       上传文件
       <input type="file" ref="inputer" @change="getFile" />
     </el-button>
   </el-input>
   <span class="dialog-footer">
     <el-button @click="showImport = false">取 消</el-button>
     <el-button type="primary" @click="comfirmImport">确 定</el-button>
  </span>
</el-dialog>

data中的变量
config是接口地址

 showImport: false,
 formData: '',
 templatePath: config.baseurl + '/' + 'Upload/import/导入模板.xlsx',
 filePath: '',

js方法

getFile() {
  let files = this.$refs.inputer.files[0];
  let formData = new FormData();
  formData.append('file', files);
  this.filePath = files.name;
  this.formData = formData;
},
// 导入文件
comfirmImport() {
  if (!this.formData) return this.$message.warning('请先上传文件');
  axios.post("接口", this.formData).then(res => {
      if (res.code == 0) {
        this.showImport = false;
        this.$message.success('导入成功');
      } else {
        this.$message.error(res.msg);
      }
    })
    .catch(err => {
      console.log(err);
    });
},