本地文件上传按钮组件

封装一款好看的文件上传按钮

import React from 'react';
import './index.scss';

class SelectFileButton extends React.Component {
  constructor(props) {
    super(props);
  }

  onChange = (event) => {
    let e = event || window.event;
    let files = e.target.files;
    if (files.length > 0) {
      let file = e.target.files[0];
      let reader = new FileReader(); // 创建一个 filereader对象
      reader.onload = (e) => {
        const data = reader.result;
        // 获取得到的文件信息
        this.props.onChange && this.props.onChange(data);
        // 数据回传之后将值置空，避免重复选择不触发onChange事件
        this.refs["file-select"].value = '';
      };
      reader.readAsText(file, 'utf-8');
    }
  };

  render() {
    return (
      <label className="file-select-wrap">
        <input 
        	type="file" 
        	onChange={(e) => this.onChange(e)}
        	ref="file-select" 
        />
        导入流程图
      </label>
    );
  }
}

export default SelectFileButton;

css文件

.file-select-wrap {
  display: inline-block;
  margin-right: 10px;
  height: 32px;
  line-height: 32px;
  background-color: #2e85ff;
  border-color: transparent;
  color: #ffffff;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;

  >input[type='file'] {
    display: none;
  }
}

.file-select-wrap:hover {
  background-color: #579dff;
}

调用

 <SelectFileButton onChange={函数回调} />