Question

我正在学习React，目前正在使用ant设计作为我的上载按钮，但是某种程度上它是行不通的（没有设计，它通常可以正常工作。

我的原始代码（工作版本）：

export default ({ addItem }) => {
  return (
    <label className="btn">
      <input
        type="file"
        onChange={e => {
          var reader = new FileReader();

          reader.onload = event => {
            var data = event.target.result;
            var workbook = XLSX.read(data, {
              type: "binary",
            });
            workbook.SheetNames.forEach(sheetName => {
              var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
              XL_row_object.forEach(x => {
                addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
              });
            });
          };
          if (e.target.files[0]) {
            reader.readAsBinaryString(e.target.files[0]);
          }
        }}
      />
    </label>
  );
};

我犯的错误：

（此外，我的上传组件仅包含4列/值：sku，说明，数量和单价）

import React, { Component } from "react";
import * as XLSX from "xlsx";
import { Button, Icon, message } from "antd";
import "./styles.css";

export default class UploadItem extends Component {
  onImportExcel = (file, addItem) => {
    const { files } = file.target;
    const fileReader = new FileReader();
    fileReader.onload = event => {
      try {
        const { result } = event.target;
        const workbook = XLSX.read(result, { type: "binary" });
        let data = [];
        for (const Sheet in workbook.Sheets) {
          // var XL_row_object =
          XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
          if (workbook.Sheets.hasOwnProperty(Sheet)) {
            data = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);
            data.forEach(x => {
              addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
            });
          }
        }
        message.success("upload success!");
        console.log(data);
      } catch (e) {
        message = message.error("file type is incorrect!");
      }
    };
    fileReader.readAsBinaryString(files[0]);
  };
  render() {
    return (
      <div style={{ marginTop: 100 }}>
        <Button className="upload-wrap">
          <Icon type="upload" />
          <input className="file-uploader" type="file" accept=".xlsx, .xls" onChange={this.onImportExcel} />
          <span className="upload-text">Upload files</span>
        </Button>
        <p className="upload-tip">Supports files in .xlsx, .xls format</p>
      </div>
    );
  }
}

Answer 1

有几件事...我将对其进行重构，以便从XLS处理开始于组件外部（因为它实际上并不需要存在）。

然后，onImportExcel处理程序只需获取所选文件，然后通过该函数运行它，我们就可以开始了。

我对message的事情没有做任何事情-这些东西也都属于组件内部，但是到那时，我还要重构importExcel来返回诺言。我认为这超出了这个问题的范围：）

import React, { Component } from "react";
import * as XLSX from "xlsx";
import { Button, Icon, message } from "antd";
import "./styles.css";

const importExcel = (file, addItem) => {
  const fileReader = new FileReader();
  fileReader.onload = event => {
    try {
      const { result } = event.target;
      const workbook = XLSX.read(result, { type: "binary" });
      for (const Sheet in workbook.Sheets) {
        // var XL_row_object =
        XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        if (workbook.Sheets.hasOwnProperty(Sheet)) {
          data = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);
          data.forEach(x => {
            addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
          });
        }
      }
      message.success("upload success!");
    } catch (e) {
      message = message.error("file type is incorrect!");
    }
  };
  fileReader.readAsBinaryString(file);
};

export default class UploadItem extends Component {
  onImportExcel = event => {
    const { files } = event.target;
    if (files.length === 1) {
      // Process a file if we have exactly one
      importExcel(
        files[0],
        // Not sure what you want to do with the data, so let's just log it
        (sku, description, quantity, cost) => console.log(sku, description, quantity, cost),
      );
    }
  };

  render() {
    return (
      <div style={{ marginTop: 100 }}>
        <Button className="upload-wrap">
          <Icon type="upload" />
          <input className="file-uploader" type="file" accept=".xlsx, .xls" onChange={this.onImportExcel} />
          <span className="upload-text">Upload files</span>
        </Button>
        <p className="upload-tip">Supports files in .xlsx, .xls format</p>
      </div>
    );
  }
}

React / Ant Design-无法上传XLSX

1 个答案: