vue中导入excel文件

在Vue中导入Excel文件的代码如下所示：

<template>
  <div>
    <el-upload class="upload" action="#" :show-file-list="false" :on-change="handleExcel" accept="'.xlsx','.xls'" :auto-upload="false" :headers="headers">
      <el-button size="mini" type="primary">导入</el-button>
    </el-upload>
  </div>
</template>

<script>
import { SetPDFile } from "@/api";

export default {
  data() {
    return {
      headers: {
        "Content-Type": "multipart/form-data;charset=UTF-8"
      }
    };
  },
  methods: {
    // 导入表格
    handleExcel(file) {
      let formData = new FormData(); // 声明一个FormDate对象
      formData.append("formFile", file.raw); // 把文件信息放入对象中

      // 调用后台导入的接口
      SetPDFile(formData)
        .then(res => {
          if (res.Status && res.Data) {
            this.$message.success("导入成功");
            this.getList(); // 导入表格之后可以获取导入的数据渲染到页面，此处的方法是获取导入的数据
          } else {
            this.$message.error(res.Message);
          }
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: "导入失败"
          });
        });
    }
  }
};
</script>

在上述代码中，我们使用了`el-upload`组件来实现文件上传功能。通过设置`accept`属性来限制只能上传`.xlsx`和`.xls`格式的文件。在`handleExcel`方法中，我们使用`FormData`对象来构建表单数据，并将文件信息放入其中。然后调用后台的导入接口`SetPDFile`来处理上传的文件。如果导入成功，我们会显示成功的提示信息，并调用`getList`方法来获取导入的数据并渲染到页面上。如果导入失败，我们会显示失败的提示信息。
#### 引用[.reference_title]
- *1* *3* [Vue中导入excel文件的两种方式](https://blog.csdn.net/weixin_56242672/article/details/126014300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue实现导入Excel功能](https://blog.csdn.net/wanghaoyingand/article/details/118396098)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]