上传文件组件: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())); } }