详解vue实现文件导入导出(前端部分)
首先,后端要先提供文件上传的接口 importData、文件导出的接口 exportData。因为你要导出的文件应该是数据库存在的(页面中的),所以呢,具体的导出就交给后端去实现,我们前端只要直接调用那个接口,不需要写axios:其中,里的href要改成你自己后端提供的接口连接。用户点击导出,即交后端去执行。导入麻烦一点,需要设置一个弹窗,用户点击导入,弹窗出现,在该弹窗中,用户点击文件上传,然后
·
首先,后端要先提供文件上传的接口 importData、文件导出的接口 exportData,我就不提供这一部分代码了。
因为你要导出的文件应该是数据库存在的(页面中的),所以呢,具体的导出就交给后端去实现,我们前端只要直接调用那个接口,不需要写axios:
<a href="http://localhost/admin/cmn/dict/exportData" target="_blank">
<el-button type="primary" icon="el-icon-upload2">导出</el-button>
</a>
其中,<a>里的href要改成你自己后端提供的接口连接。
用户点击导出,即交后端去执行。
导入麻烦一点,需要设置一个弹窗,用户点击导入,弹窗出现,在该弹窗中,用户点击文件上传,然后选择文件。这部分里前端主要是提供一个“平台”让用户选择文件,然后文件传到后端,后端接收文件,并解析,将它存到数据库。
要注意的一点是,上传的文件可能是有固定格式的(表头),这个是在后端设定好了的,所以如果你上传的文件格式不对可能会引起报错。
首先,我们写一个导入按钮, 然后给他添加点击事件importData():
<el-button type="primary" icon="el-icon-download" @click="importData()">导入</el-button>
然后在<script>中添加方法:
importData() {
console.log('导入...')
this.dialogImportVisible = true
},
写一个弹窗:
<el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
<el-form label-position="right" label-width="170px">
<el-form-item label="文件">
<el-upload
:multiple="false"
:on-success="onUploadSuccess"
:action="'http://localhost/admin/cmn/dict/importData'"
class="upload-demo"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传xls文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogImportVisible = false">取消</el-button>
</div>
</el-dialog>
data中添加:
dialogImportVisible: false
注意到:action里的链接要替换成你的后端接口。
最后在<script>中添加方法,当成功上传后关闭弹窗:
onUploadSuccess(response, file) {
this.$message.info('上传成功')
this.dialogImportVisible = false
// 此处可以再添加方法,使导入的数据渲染到页面中,那就需要后端的接口实现。
}
更多推荐
已为社区贡献2条内容
所有评论(0)