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

时间:2020-01-09
本文章向大家介绍Vue之使用elementUI的upload上传导入csv文件,主要包括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来做的,在我的下一篇博客中您也可以找到。

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

$flag 上一页 下一页