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来做的，在我的下一篇博客中您也可以找到。
转载于：
还没试过不知道有没效果。
最近干活的时候有个需求，需要将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来做的，在我的下一篇博客中您也可以找到。
还没试过不知道有没效果。
