写在前面:前端通过使用上传文件的组件,对上传的文件进行读取和操作。以下下容包含了Excel文件转化为js对象,Json文件转化为js对象
- Excel文件转化
import { read, utils } from "xlsx";
import { Upload } from "antd";
const () => {
const beforeUpload = (file, fileList) => {
if(file?.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){
const readFile = new FileReader();
readFile.readAsArrayBuffer(file);
readFile.onload = () => {
const wb = read(readFile.result);
// 结果为js对象
const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
}
}
}
return <Upload.Dragger beforeUpload={beforeUpload} >
<InboxOutlined style={{ fontSize: 50, color: '#40a9ff' }} />
<div>点击或者拖动文件到此处</div>
</Upload.Dragger>
}
- Json文件转化
import { Upload } from "antd";
const () => {
const beforeUpload = (file, fileList) => {
if(file?.type === 'application/json'){
const readFile = new FileReader();
readFile.readAsText(file);
readFile.onload = () => {
const data = JSON.parse(readFile.result);
}
readFile.onerror = () => {
console.log('文件读取错误,请稍后重试');
}
}
}
return <Upload.Dragger beforeUpload={beforeUpload} >
<InboxOutlined style={{ fontSize: 50, color: '#40a9ff' }} />
<div>点击或者拖动文件到此处</div>
</Upload.Dragger>
}