当前位置:网站首页>antd组件upload上传xlsx文件,并读取文件内容
antd组件upload上传xlsx文件,并读取文件内容
2022-07-02 22:09:00 【不会秃头】
xlsx包
这个包是个npm包,这里使用的版本为:
“xlsx”: “^0.14.5”
使用方式
首先,在文件中引入:
import XLSX from 'xlsx';
然后在upload组件的beforeUpload中使用:
beforeUpload(files) {
const readFile = file => {
const [fileReader, data1] = [new FileReader(), {
}];
let [binaryData, workbook] = [null, null];
fileReader.onload = e => {
binaryData = e.target.result;
workbook = XLSX.read(binaryData, {
type: 'binary' });
Object.keys(workbook.Sheets).forEach(sheet => {
data1[sheet] = XLSX.utils
.sheet_to_json(workbook.Sheets[sheet], {
header: 1 })
.slice(1);
});
workbook.SheetNames.forEach(sheetName => {
const dataSheet = data1[sheetName];
for (let index = 0; index < dataSheet.length; index += 1) {
const row = dataSheet[index];
const item = {
name: row[0] ? row[0] : null,
snCode: row[1] ? row[1] : null,
macAddress: row[2] ? row[2] : null,
ipAddress: row[3] ? row[3] : null,
number: Number(row[4] ? row[4] : null),
podium: (row[5] ? row[5] : null) === '是' ? true : false,
devices: [
{
ipAddress: row[6] ? row[6] : null,
location: 'top1'
},
{
ipAddress: row[7] ? row[7] : null,
location: 'side1'
},
{
ipAddress: row[8] ? row[8] : null,
location: 'front1'
},
{
ipAddress: row[9] ? row[9] : null,
location: 'front2'
},
]
};
fileData.push(item);
}
});
// fileData即为表格数据
if (fileData.length > 0) {
that.setState({
tables: fileData,
});
message.success('导入成功!');
}else {
message.error('导入失败!')
}
};
fileReader.readAsBinaryString(file);
};
readFile(uploadFile);
边栏推荐
- Simpleitk use - 3 Common operations
- Additional: [login information storage] and [login status verification]; (including: summarizing all the contents of [login information storage] and [login status verification] so far;)
- 数据分析学习记录(二)---响应曲面法及Design-Expert的简单使用
- Qt QSplitter拆分器
- [error record] the flutter reports an error (could not read script 'xxx\flutter\u tools\gradle\app\u plugin\u loader.gradle')
- How should programmers write logs
- Array advanced improvement
- `Usage of ${}`
- Radis:Linux上安装Redis(步骤)
- [NPUCTF2020]ezlogin xPATH注入
猜你喜欢
手写ORM(对象关系映射)增删改查
Simpleitk use - 4 Strange question
Commodity information management system (C language document version)
悬镜安全在RSAC2022上斩获Global InfoSec Awards四项大奖
[error record] the flutter reports an error (could not read script 'xxx\flutter\u tools\gradle\app\u plugin\u loader.gradle')
[leetcode] reverse the word III in the string [557]
Xiaopeng P7 had an accident and the airbag did not pop up. Is this normal?
杰理之、产线装配环节【篇】
P7072 [CSP-J2020] 直播获奖
Jatpack------LiveData
随机推荐
[LeetCode] 回文数【9】
杰理之直接触摸样机的顶针反应不正常【篇】
WebRTC音视频采集和播放示例及MediaStream媒体流解析
地方经销商玩转社区团购模式,百万运营分享
[leetcode] number of palindromes [9]
Additional: [login information storage] and [login status verification]; (including: summarizing all the contents of [login information storage] and [login status verification] so far;)
Array advanced improvement
Uniapp wechat login returns user name and Avatar
杰理之内置短按再长按,不管长按多长时间都是短按【篇】
Golang interview finishing three resumes how to write
Jielizhi, production line assembly link [chapter]
存储单位换算
对象与对象变量
佩服,竟然有人把高等数学这么晦涩难懂的科目,讲解得如此通俗易懂
wait解决僵尸进程
【板栗糖GIS】arcmap—为什么使用自定义捕捉的时候,经典捕捉的勾要去掉呢?
Server response status code
php实现根据输入的年龄查询出生日期符合的数据
牛客网:龙与地下城游戏
stop slave卡住--事务的事件没有复制完整