Vue之使用elementUI的upload上传组件导入csv文件

最近干活的时候有个需求，需要将csv文件导入到mysql数据库中，前后端框架用的springboot+Vue，组件用的elementUI，下面将分步骤记录实现过程。

 

1.导入按钮部分：

<el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="openCsvDialog()" icon="el-icon-plus">
    导入
el-button>

2.按钮点击事件，这里是打开了一个Dialog

openCsvDialog() {
    this.file = {};
    this.csvVisible = true;
    this.csvTitle = '导入CSV文件';
    this.$refs.upload.clearFiles();
}

3.Dialog部分：

dialog
    :title="csvTitle"
    :visible.sync="csvVisible"
    width="50%">
    

        
        
            upload
                class="upload-demo"
                ref="upload"
                drag
                accept=".csv"
                action=""
                :multiple="false"
                :limit="1"
                :auto-upload="false"
                :on-change="handleChange">
                
                
将文件拖到此处，或点击上传
                
只能上传csv文件
            
        
        
    
    
    取消
    导入
    

说一说Dialog中的各个属性，其中：

class指定了上传的样式；

ref的话指一个引用，例如你到时候可以用this.$refs.upload.submit()来进行手动上传

drag表示是否可以进行文件拖拽

accept表示可以接收的上传文件的类型

action表示你上传文件的地址，这里我不做上传文件的保存，读取到文件流后直接入库，所以我给的空串

:multiple="false"表示不支持多选文件，如果是true的话，表示支持多选文件

:limit="1"表示最大允许上传个数，这里的话是表示最多上传一个，多上传覆盖

:auto-upload="false"表示不支持选择完文件后自动上传，这里要注意的是，当这个属性值为false的时候，你上传前的钩子函数before-upload是不好使的，但是可以用this.$refs.upload.submit()来进行手动上传。

:on-change="handleChange"表示文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，这个钩子很重要，他可以接收两个参数，一个是选择的单个文件，另一个是多选的文件列表，我就是用这个钩子来获取上传文件和手动上传的。

 

4.handleChange方法：

// 上传文件，获取文件流
handleChange(file) {
    this.$refs.upload.clearFiles();
    //每次上传前都清空
    this.file = {};
    //赋值
    this.file.file = file.raw;
},

5.点击事件importCsv方法：

async importCsv() {
        if(Object.keys(this.file).length != 0){
          const res = await this.$store.api.newReq('/xxx/xxxxxx/importcsv').upload(this.file);
          if (res.code === 0) {
            this.csvVisible = false;
            //这里是导入完文件后，重新查询数据库刷新页面
            this.getList();
            this.$message({
              type: 'success',
              message: '导入成功',
              duration: 1500,
              onClose: async () => {
              }
            })
          }
        }else{
          this.$message.error('上传文件不能为空');
        }
}

 

以上就是elementUI组件用upload来手动导入csv文件的Vue侧的写法，然后在后台就可以拿到文件，读取文件流存入数据库啦！读取csv文件流入库我用的是openCsv来做的，在我的下一篇博客中您也可以找到。

希望这篇文章能真正的帮助到您，解决您的一些迷惑，有问题的小伙伴可以留言交流哦