前端vue2使用el-upload上传csv文件

在Vue 2中，使用Element UI库的`el-upload`组件可以方便地处理CSV文件上传。以下是基本步骤：

1. 引入依赖：首先需要安装Element UI库，可以在项目中通过npm或yarn添加：

npm install element-ui
# 或者
yarn add element-ui

然后在入口文件（如main.js）中引入并注册：

import { ElUpload } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.component('el-upload', ElUpload);

2. 在模板中使用`el-upload`：创建一个`<el-upload>`元素，并设置属性，例如允许单次或多文件上传、设置表单数据（如果需要）、提供上传成功的回调等。

<template>
  <div>
    <el-upload
      action="your-api-url" <!-- 服务器接收文件的URL -->
      :multiple="true" <!-- 是否支持多文件上传，默认false -->
      :on-success="handleSuccess" <!-- 文件上传成功后的回调 -->
      :file-list="fileList" <!-- 用于展示已上传文件列表 -->
      accept="application/vnd.ms-excel, text/csv" <!-- 只接受.csv文件 -->
    >
      <i class="el-icon-upload"></i> <em>点击上传</em>
    </el-upload>
  </div>
</template>

3. 实现回调函数：在这里处理上传成功的响应，通常会解析上传的CSV内容，或者将文件保存到本地或者其他地方。

<script>
export default {
  data() {
    return {
      fileList: [], // 用于存储上传文件的信息
    };
  },
  methods: {
    handleSuccess(response, file) {
      if (response.status === 200) {
        let blob = new Blob([response.data], { type: 'text/csv' });
        let url = window.URL.createObjectURL(blob);
        this.fileList.push({ name: file.name, url });
        // 这里可以根据需要进一步操作文件内容，比如解析成表格数据
      }
    },
  },
};
</script>