当前位置:网站首页>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);
边栏推荐
- 分享 10 个 JS 闭包面试题(图解),进来看看你能答对多少
- 中国信通院、清华大学、腾讯安全,云原生安全产学研用强强联合!
- 手写ORM(对象关系映射)增删改查
- Commodity information management system (C language document version)
- Dahua cloud native load balancing article - the passenger flow of small restaurants has increased
- Qt QSplitter拆分器
- 小鹏P7出事故,安全气囊未弹出,这正常吗?
- Golang interview finishing three resumes how to write
- Golang's learning route
- PHP optimizes SQL queries in foreach
猜你喜欢
Oracle PL / SQL programming
Local dealers play the community group purchase mode and share millions of operations
#include errors detected. Please update your includePath.
[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]
数组进阶提高
手写ORM(对象关系映射)增删改查
Developers share | HLS and skillfully use Axi_ Customize the master bus interface instructions and improve the data bandwidth - area exchange speed
Socket socket c/s end process
Source code analysis - lightweight asynchronous crawler framework Ruia
随机推荐
JS获取display为none的隐藏元素的宽度和高度的解决方案
存储单位换算
Performance optimization - rigorous mode
Go four singleton modes
高并发介绍及应对
【板栗糖GIS】arcscene—如何做出有高度的高程图
`Usage of ${}`
[error record] the flutter reports an error (could not read script 'xxx\flutter\u tools\gradle\app\u plugin\u loader.gradle')
Source code analysis - lightweight asynchronous crawler framework Ruia
boot actuator - prometheus使用
Baidu AI Cloud - create a face recognition application
go 多线程数据搜索
Task and privilege level protection
Using rendertext() to output multiple lines of text with rendertext() in R shiny
原生js添加样式的方法
电商系统微服务架构
[foreign journal] sleep and weight loss
odoo13搭建医院HRP环境(详细步骤)
[LeetCode] 数组中的第K个最大元素【215】
Go condition variable