在vue中实现excel表格导入

poguanba

已于 2023-03-09 16:16:39 修改

阅读量249

点赞数

文章标签： javascript 前端 vue.js

于 2023-03-09 15:46:36 首次发布

本文链接：https://blog.csdn.net/poguanba/article/details/129423761

版权

该文章展示了如何在Vue应用中实现Excel表格的导入功能。用户点击导入按钮后，弹出对话框选择文件，通过axios发送POST请求到接口进行文件上传。如果未上传文件，系统会给出警告；导入成功则显示成功消息，否则显示错误信息。

摘要由CSDN通过智能技术生成

#在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);
    });
},