读取拖入的Excel或Json文件

174 阅读1分钟

写在前面:前端通过使用上传文件的组件,对上传的文件进行读取和操作。以下下容包含了Excel文件转化为js对象,Json文件转化为js对象

  1. 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>
    } 
  1. 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>
    }