安装xlsx
npm intall xlsx --save

文件代码

// 导入文件
import XLSX from 'xlsx'; 

// react读取文件内容 

@connect(state => state)
export default class ImportExcel extends Component {

   constructor(props) {
      super(props);
      this.state = {
          uploadList : [],
      };
  }

  _importExcel = (e) => {
      const self = this;
      const files = e.target.files[0];
      
      const fileReader = new FileReader();
      // 如果IE 浏览器 不支持FileReader
      const File_Status = FileReader.prototype.readAsBinaryString;
      File_Status ? fileReader.readAsBinaryString(files) : fileReader.readAsArrayBuffer(files);

      fileReader.onload = function(ev) {
      fileReader.onload = function(ev) {
          try {
              let data = ev.target.result,
                  workbook = XLSX.read(data, {type: File_Status ? "binary" : "array"}),
                  persons = []; // 存储获取到的数据

              // 表格的表格范围，可用于判断表头是否数量是否正确
              let fromTo =  "";
              // 遍历每张表读取
              for (let sheet in workbook.Sheets) {
                  if (workbook.Sheets.hasOwnProperty(sheet)) {
                      fromTo = workbook.Sheets[sheet]['!ref'];
                      persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                  }
              }
              console.log(persons);
              self.setState({uploadList:persons},() => self._saveXLSXData())
          } catch (e) {
              self.file.value = "";
              console.log("文件类型不正确!");
              return;
          }
      };
  };

  /**
   * 保存并上传的数据到数据库
   * @private  该方法是把数据发送到服务器, 请求方法自己处理 
   */
  _saveXLSXData = () => {
      const {uploadList} = this.state;
      let data = {
          data : uploadList,
      };
      const self = this;
      return new Promise( async (ps,pe)=>{
          this.file.value = "";
          let res = await AxiosFn('/maintain/saveStudents', data , "POST").catch((e) => {});
          if (res && (res.code === 0)) {
              message.success("数据添加成功!");
              this.setState({uploadList : []});
              self.getPageData();
          }
          ps();
      });
  };


  render(){
      return(
          <div style={{marginRight: 15,width:120, border:"1px solid #ccc",borderRadius:5,padding:"6px 12px",position:"relative"}}>
              数据导入
              <input
                  ref={(file) => this.file = file }
                  type="file"
                  onChange={this.importExcel}
                  style={{position: 'absolute', top: 0, left: 0,width: '100%',zIndex:999,opacity:0}}
              />
          </div>
      )
  }
  };