Antd Upload组件上传文件至php后端, php拿到对应的文件名

上传文件组件：UploadFile.jsx

import React from "react";
import * as antd from "antd";

const { Upload, Button, Icon, message } = antd;

class Wrapper extends React.Component {
  state = {};

  // 新打开界面
  componentDidMount() {}

  onChange = ({ file }) => {
    if (file.status === "done") {
      message.success(`${file.name} file uploaded successfully`);
      console.log(file);
      const {
        response: { code, msg, data }
      } = file;

      this.props.onOk({ code, msg, data });
    } else if (file.status === "error") {
      message.error(`${file.name} file upload failed.`);
    }
  };

  // 渲染
  render() {
    const { url } = this.props;
    const props = {
      name: "file",
      action: url,
      showUploadList: false,
      headers: {
        authorization: "authorization-text"
      },
      onChange: this.onChange
    };

    return (
      <Upload {...props}>
        <Button
          style={{ marginLeft: 20 }}
          onClick={() => {
            console.log("hhhh");
          }}
        >
          <Icon type="upload" />
          从文件导入
        </Button>
      </Upload>
    );
  }
}

export default Wrapper;

 组件使用：

<UploadFile url='/api/login/upload' onOk={this.onOk.bind(this)} />

 onOk 一般是放服务端处理完成后的后续操作！如:

onOk = res => {
        console.log('onOk', res);
    };

 

php 后端处理：

	public function upload()
	{
		$file = $_FILES['file'];
		$path = $file['tmp_name'];

		$data = ExcelModule::loadFile($path);   // 得到返回的数据

		log_message($data);

		return result(0, 'suc', $data);
	}

 ExcelModule::loadFile是读取excel文件的内容，并返回array数据用的，实现如下:

public static function loadFile(string $filePath)
	{
		try {
			$reader = \PHPExcel_IOFactory::createReaderForFile($filePath);
			$excel = $reader->load($filePath);
			$sheet = $excel->getActiveSheet();

			return $sheet->toArray();
		}
		catch(\Exception $e)
		{
			log_message(sprintf('读取excel文件失败: file=%s, errorMsg=%s', $filePath, $e->getMessage()));
		}
	}