vue解析表格数据成json,并且分片上传

港控/mmm° 2022-10-05 09:45 133阅读 0赞

这个不用说

npm i XLSX -S

然后  
解析

<el-upload class="upload" action="" :multiple="false" :show-file-list="false"
                            accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                            :http-request="httpRequest">
                            <el-button size="small" type="primary">上传</el-button>
                        </el-upload>

httpRequest(e) { 
                    let file = e.file // 文件信息
                    if (!file) { 
                        // 没有文件
                        return false
                    } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) { 
                        // 格式根据自己需求定义
                        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
                        return false
                    }
                    const fileReader = new FileReader()
                    fileReader.onload = (ev) => { 
                        try { 
                            const data = ev.target.result
                            const workbook = XLSX.read(data, { 
                                type: 'binary' // 以字符编码的方式解析
                            })
                            const exlname = workbook.SheetNames[0] // 取第一张表
                            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
                            this.list = exl
                            this.uploadArr(1)
                            // 将 JSON 数据挂到 data 里
                            console.log(this.list)
                        } catch (e) { 
                            console.log('出错了：：')
                            return false
                        }
                    }
                    fileReader.readAsBinaryString(file)
                },
                // 切片上传
                uploadArr(page) { 
                    if (this.list.length == 0) { 
                        this.$message.error('上传的是空excel,请重新上传')
                        return false;
                    }
                    var arr = [];
                    var finished = false;
                    var num = 1000;
                    if (page * num >= this.list.length) { 
                        // 标记结束
                        finished = true;
                        arr = this.list.slice((page - 1) * num, this.list.length);
                        console.log(arr)  //这里是调用上传接口
                    } else { 
                        arr = this.list.slice((page - 1) * num, page * num);
                        console.log('分片'+page,arr) //这里是调用上传接口
                    }
                    if (!finished) { 
                        page += 1;
                        console.log(page)
                        this.uploadArr(page);
                    }
    
                },