Vue之功能全面的表格（十）表格数据的Excel导入

上传文件对话框

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、导入后效果

小结

表格实现了增删改查，excel导入导出等功能，源代码下载地址
github地址
我的git地址