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来做的,在我的下一篇博客中您也可以找到。
转载于:https://www.cnblogs.com/ailanlan/p/12143685.html
还没试过不知道有没效果。
原文地址:https://www.cnblogs.com/xiong88/p/12427612.html
- 美团点评SQL优化工具SQLAdvisor开源
- 美团外卖前端可视化界面组装平台 —— 乐高
- Android自定义Lint实践2——改进原生Detector
- 布局编码的未来
- 美团点评前端无痕埋点实践
- Android远程调试的探索与实现
- Redux从设计到源码
- Golang语言社区--Golang通用连接池
- 学习笔记CB009:人工神经网络模型、手写数字识别、多层卷积网络、词向量、word2vec
- 本周群问题分享
- 干货 | 一篇文章教你用TensorFlow写名著
- 开发图片预加载框架
- 机器学习之分类问题实战(基于UCI Bank Marketing Dataset)
- python笔记:#013#高级变量类型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Window常用账号密码修改(Git)
- 高通AI研究院|高效网络设计|结构化卷积分解
- tomcat调优 tomcat配置优化
- error: PyThreadState {aka struct _ts} has no member named exc_type
- Python创建目录文件夹
- python 按顺序读文件夹下面的文件
- python剪切文件
- 一个hashCode问题的追问,差点让我陷入无底洞
- 【JAVA基础&高级】 面向对象篇
- MySQL-InnoDb行格式与数据页结构 Krains 2020-08-08
- 《自然语言处理实战入门》 ---- 第4课 :中文分词原理及相关组件简介 之 汉语分词领域主要分词算法、组件、服务(上)...
- MySQL索引 Krains 2020-08-09
- 「查缺补漏」巩固你的Redis知识体系
- MySQL事务 Krains 2020-08-09
- Linux本地提权漏洞复现与检测思路