使用VUE框架中的elementUI,写一个CSV文件上传的功能

1. 安装elementUI

在终端中执行以下命令：

npm install element-ui --save

2. 引入elementUI和Vue

在你的Vue组件中添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 添加上传组件

在你的Vue组件中添加以下代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :auto-upload="false"
      :multiple="false">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传csv文件</div>
    </el-upload>
  </div>
</template>

4. 完善上传功能

在你的Vue组件中添加以下代码：

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response)
      console.log(file)
      console.log(fileList)
    },
    handleError(error, file, fileList) {
      console.log(error)
      console.log(file)
      console.log(fileList)
    },
    beforeUpload(file) {
      const isCSV = file.type === 'text/csv'
      if (!isCSV) {
        this.$message.error('只能上传csv文件')
      }
      return isCSV
    }
  }
}
</script>

在`handleSuccess`和`handleError`方法中，我们可以处理上传成功和上传失败的情况，同时可以打印出上传的响应、文件和文件列表。在`beforeUpload`方法中，我们可以判断上传的文件类型是否为csv文件，如果不是，会弹出一个错误提示。

以上就是使用Vue框架中的elementUI写一个CSV文件上传的功能的步骤。