上传文件对话框
1、上传对话框显示属性,上传成功方法,上传路径
data() {
return {
...
uploadShow: false,
}
},
methods: {
...
uploadSuccess(res) {
alert(res)
}
},
computed: {
...
uploadUrl() {
return `${this.$ajax.defaults.baseURL}todos/upload`
}
}
2、上传文件对话框
<!-- 上传文件对话框 -->
<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>
3、给导入按钮绑定点击事件
<el-button type="warning" icon="el-icon-upload2" @click="uploadTodo()">导入</el-button>
uploadTodo () {
this.uploadShow = true
},
后台部分
4、用npm
安装formidable
和node-xlsx
两个包
npm i -s formidable node-xlsx
5、编辑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 = Todo.create(tmp)
}
res.send('导入完成')
})
})
完善前端
6、回到client
项目,在接受到成功消息后更新数据,关闭对话框
uploadSuccess(res) {
this.$notify({
type: 'success',
message: res
})
this.update()
this.uploadShow = false
}
测试
7、创建一个Excel
文件,输入测试数据(可输入多条)
日期需要转换成字符串类型哦
8、导入后效果