Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose
上传对话框显示属性，上传成功方法，上传路径
data() { return { //... uploadShow: false, } }, methods: { //... uploadSuccess(res) { alert(res) } }, computed: { //... uploadUrl() { return `${this.$ajax.defaults.baseURL}todos/upload` } }上传文件对话框
<!-- 上传文件对话框 --> <el-dialog title="上传文件" :visible.sync="uploadShow"> <el-upload :action="uploadUrl" :on-success="uploadSuccess"> <el-button type="primary" icon="el-icon-upload">上传</el-button> </el-upload> <span slot="footer"> <el-button type="danger" icon="el-icon-close" @click="uploadShow=false">关闭</el-button> </span> </el-dialog>用npm安装formidable和node-xlsx两个包
npm i -s formidable node-xlsx编辑server项目中router.js
// 引入 var formidable = require('formidable') var node_xlsx = require('node-xlsx') // 将字符串转化为日期 function convertDate(s) { console.log(s) let data = s.split('/') let year = parseInt(data[0]) let month = parseInt(data[1])-1 let day = parseInt(data[2]) return new Date(year, month, day) } router.route('/upload').post((req, res) => { let form = new formidable.IncomingForm() form.encoding = 'utf-8' form.parse(req, (err, fields, files) => { let workbook = node_xlsx.parse(files.file.path) // workbook[0] 即 sheet1 中的数据， 再用slice去掉表头 let data = workbook[0].data.slice(1) for(let item of data){ let tmp = {} tmp.name = item[0] tmp.author = item[1].split(',') tmp.status = 0 tmp.completeDate = convertDate(item[2]) let todo = await Todo.create(tmp) } res.send('导入完成') }) })回到client项目，在接受到成功消息后更新数据，关闭对话框
uploadSuccess(res) { this.$notify({ type: 'success', message: res }) this.update() this.uploadShow = false }创建一个Excel文件，输入测试数据（可输入多条） 
导入后效果 
表格实现了增删改查，excel导入导出等功能，源代码下载地址