vue +elementui 导入CSV文件

在Vue项目中使用Element UI的<el-upload>组件来导入CSV文件，可以按照以下步骤实现：

1. 使用<el-upload>组件来上传文件。
2. 监听文件选择事件，并处理文件。
3. 使用第三方库（如PapaParse）来解析CSV文件。

以下是一个简单的例子：

<template>
  <el-upload
    ref="upload"
    action="#"
    :auto-upload="false"
    :on-change="handleFileChange"
    :before-upload="beforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选择 CSV 文件</el-button>
    <el-button
      style="margin-left: 10px;"
      size="small"
      type="success"
      @click="submitUpload"
    >上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
import Papa from 'papaparse'
 
export default {
  methods: {
    beforeUpload(file) {
      const isCSV = file.type === 'text/csv';
      const isLt2M = file.size / 1024 / 1024 < 2;
 
      if (!isCSV) {
        this.$message.error('只能上传CSV文件!');
      }
      if (!isLt2M) {
        this.$message.error('上传的文件大小不能超过 2MB!');
      }
      return isCSV && isLt2M;
    },
    handleFileChange(file, fileList) {
      this.parseCSV(file.raw);
    },
    parseCSV(file) {
      Papa.parse(file, {
        header: true,
        complete: (result) => {
          console.log('Parsed CSV Data:', result.data);
          // 处理解析后的CSV数据
        },
        error: (error) => {
          console.error('Error parsing CSV:', error);
        }
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
}
</script>

在这个例子中，我们使用了Element UI的<el-upload>组件来上传文件，并通过beforeUpload方法进行文件类型和大小的校验。handleFileChange方法使用PapaParse库来解析选择的CSV文件，并在解析完成后处理数据。submitUpload方法触发文件上传的动作，但实际上由于我们设置了action属性为#，因此不会真正上传到服务器，这里只是作为一个触发解析和处理CSV数据的方式。