(1):页面按钮部分代码
<div style={{ marginTop: 5 }}>
<Tooltip placement="topLeft" title="仅支持 .xlsx、.xls 格式的文件">
<Button onClick={this.uploadFile}>
<Icon type="arrow-up" />
批量发货
</Button>
</Tooltip>
<input type='file' key={inputKey} accept='.xlsx, .xls' onChange={this.onImportExcel} hidden ref="inputFile" />
</div >
(2):调用的两个方法
//表格导入 批量发货
onImportExcel = file => {
// 获取上传的文件对象
const { files } = file.target;
// 通过FileReader对象读取文件
const fileReader = new FileReader();
fileReader.onload = event => {
try {
const { result } = event.target;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, { type: 'binary' });
// 存储获取到的数据
let data = [];
// 遍历每张工作表进行读取(这里默认只读取第一张表)
for (const sheet in workbook.Sheets) {
// esline-disable-next-line
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一张表,就取消注释这行
}
}
// 最终获取到并且格式化后的 json 数据
*****此处写需要上传的地址,即:接受数据的地方**************
} catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
message.error('文件类型不正确!');
}
this.setState({
inputKey: Math.random()
})
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
}
//点击buttom触发input type="file"的点击事件
uploadFile = () => {
this.refs.inputFile.click();
}
(3):注意:处理页面用户不刷新页面时,一直可以上传文件,添加了inputKey
this.state = {
inputKey: Math.random(),//导入
}
(4):引入文件
import * as XLSX from 'xlsx';