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部分：

<el-dialog
    :title="csvTitle"
    :visible.sync="csvVisible"
    width="50%">
    <div>
        <el-form ref="file" label-width="120px">
        <el-form-item label="CSV文件导入：">
            <el-upload
                class="upload-demo"
                ref="upload"
                drag
                accept=".csv"
                action=""
                :multiple="false"
                :limit="1"
                :auto-upload="false"
                :on-change="handleChange">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传csv文件</div>
            </el-upload>
        </el-form-item>
        </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="csvVisible = false">取消</el-button>
    <el-button type="primary" @click="importCsv">导入</el-button>
    </span>
</el-dialog>

说一说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来做的，在我的下一篇博客中您也可以找到。

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