el-upload上传excel表格代码

要实现通过el-upload组件上传Excel文件，并在上传到服务器之前进行文件格式判断的功能，可以按照以下步骤进行操作：

1. 在页面上定义一个上传按钮，使用el-upload组件，并设置相关属性，如action属性指定上传文件的接口地址，on-change属性指定文件变化时的回调函数，auto-upload属性设置为false以便手动触发上传，show-file-list属性设置为false隐藏文件列表，accept属性指定文件类型为.xls和.xlsx格式。

2. 在回调函数onChange中，获取到上传的文件，进行文件校验，判断文件是否是Excel文件。首先创建一个FormData对象，用于存储上传的文件。然后通过FormData的append方法将文件对象添加到FormData中。接着，通过file.name获取文件名，并使用.split(".")将文件名拆分为数组，取数组的第二个元素判断文件的后缀名。如果后缀名为xls、xlsx或csv，说明是Excel文件，将state.imgs设置为true表示文件格式正确，返回file对象。否则，返回false表示文件格式不正确。

3. 在确定导入未使用信息的方法onSubmit中，首先通过ruleFormRef.value.validate方法对表单进行验证。如果验证通过，调用unitregisterImport方法上传文件，并将state.unitId和state.formData作为参数传递给接口。接口返回结果为true时，表示导入成功，可以进行相关操作，如显示成功提示信息，刷新页面等。如果返回结果为false，表示导入失败。

下面是el-upload上传Excel表格的代码示例：

<template>
  <el-upload
    action="/上传文件的接口"
    :on-change="onChange"
    :auto-upload="false"
    :show-file-list="false"
    accept=".xls, .xlsx"
  >
    <el-button v-waves size="mini" type="warning" icon="el-icon-folder-add">
      上传
    </el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    onChange(file) {
      let formData = new FormData();
      formData.append("file", file);
      
      const Xls = file.name.split(".");      if (Xls === "xls" || Xls === "xlsx" || Xls === "csv") {
        state.imgs = true;
        return file;
      } else {
        return false;
      }
    },
    onSubmit() {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          unitregisterImport(state.unitId, state.formData).then((res) => {
            if (res == true) {
              state.innerVisible = true;
              methods.getDetails();
              // ElMessage.success("导入成功");
            } else {
              // ElMessage.warning("导入失败");
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

请注意，上述代码仅为示例，具体根据你的项目需求进行适当调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [elemetUi 组件–el-upload实现上传Excel文件的实例](https://download.csdn.net/download/weixin_38574410/13192019)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [使用el-upload上传excel文件并读取显示到el-table上](https://blog.csdn.net/weixin_43258184/article/details/121850027)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue3+element-plus的el-upload上传excel表格](https://blog.csdn.net/weixin_50041614/article/details/126724906)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]