javascript - 如何在 React 中上传和读取 .csv、.xls 和 .xlsx
问题描述
我正在尝试上传格式为.csv/.xls/.xlsx
的文件,然后读取文件内容。
例如下面的文件
会输出:
name,age,key
Mark,25,1
Jones,30,2
到目前为止,这是我使用react-file-reader和base-62实现的,但它仅适用于.csv
文件:
onFileUpload(file) {
var decodedData = base64.decode(file.base64);
}
<ReactFileReader fileTypes={[".csv",".xls", ".xlsx"]} base64={true} multipleFiles={false} handleFiles={this.onFileUpload}>
<button className='btn'>Upload</button>
</ReactFileReader>
有什么方法可以使用.xls
与.xlsx
文件相同的方式获取.csv
文件的内容吗?或者也许另一个模块可以做到这一点......
解决方案
我添加了如下代码,
选择 Excel 文件
<ReactFileReader handleFiles={this.handleFiles} fileTypes={[".xls", ".xlsx", ".csv"]} base64={true}>
<button className='btn btn-warning btn-sm'>Select File</button>
{ this.state.isFileLoaded ? <label>File Loaded</label>
: <label>File Not Selected</label> }
</ReactFileReader>
<span id="errprojectLogoUrl" className="text text-danger"></span>
然后我编写了如下的handleFiles,它对我来说是成功的,
handleFiles = 文件 => { this.showLoading();
const currentMsgModal = {
...this.state.messageModal
};
currentMsgModal["isModalHidden"] = true;
let jsonBase64 = files.base64;
let index = jsonBase64.indexOf(',');
let encodedString = jsonBase64.substr(index + 1);
let fileName = files.fileList[0].name;
let formatString = /[^.]*$/.exec(fileName)[0];
let isCSVFile = formatString.includes('csv');
let isXLSFile = formatString.includes('xls');
let isXLSXFile = formatString.includes('xlsx');
if (isCSVFile || isXLSFile || isXLSXFile)
{
this.setState({
inputFileBaseString: encodedString,
isFileLoaded: true,
messageModal: currentMsgModal
});
}
else
{
currentMsgModal["messageType"] = "Error"
currentMsgModal["messageDescription"] = "File Type Not Supported"
currentMsgModal["isModalHidden"] = false;
this.setState({
messageModal: currentMsgModal
});
}
this.hideLoading();
}
推荐阅读
- c++ - SFINAE 无法处理中间类型特征
- c# - 使用代码优先方法更改主键数据类型
- sql - ORA-00913: oracle 子查询中的值太多
- python - 保持 Python 模块井井有条的最佳方法
- webgl2 - 如何使用 texStorage2D?
- r - 将所选行求和到 R 中的新行
- heroku - 无法通过 CLI 登录 heroku
- node.js - 如何使用 Node Http Server Keep Alive
- microsoft-graph-api - microsoft-graph - 错误:ResourceNotFound - 消息:无法发现资源
- javascript - 循环(可能无限地)重复对象结构