FilePicker 文件选择器

基本用法

import { Cell, FilePicker, Icon } from 'zarm';
class Demo extends React.Component {
  state = {
    files: [],
  };
  onSelect(file) {
    console.log(file);
    const { files } = this.state;
    files.push(file);
    this.setState({
      files,
    });
  }
  render() {
    return (
      <div>
        {this.state.files.map((item, index) => <Cell key={+index}>{item.fileName}</Cell>)}
        <div className="file-picker-wrapper">
          <FilePicker
            className="file-picker-btn"
            onChange={selected => this.onSelect(selected)}
          >
            <Icon type="add" size="lg" />
          </FilePicker>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

多选模式

import { Cell, FilePicker, Icon, Toast, Badge } from 'zarm';
const MAX_FILES_COUNT = 5;
const onBeforeSelect = () => {
  alert('执行 onBeforeSelect 方法');
}
class Demo extends React.Component {
  state = {
    files: [],
  };
  onSelect(selFiles) {
    let { files } = this.state;
    files = files.concat(selFiles);
    if (files.length > MAX_FILES_COUNT) {
      Toast.show('最多只能选择5张图片')
      return;
    }
    this.setState({ files });
  }
  remove(index) {
    const { files } = this.state;
    files.splice(index, 1);
    this.setState({ files });
    Toast.show('删除成功');
  }
  imgRender() {
    const { files } = this.state;
    return files.map((item, index) => {
      return (
        <Badge
          key={+index}
          sup
          className="file-picker-item"
          shape="circle"
          text={<Icon type="wrong-round-fill" size="sm" theme="danger" />}
          onClick={() => this.remove(index)}
        >
          <div className="file-picker-item-img">
            <a href={item.thumbnail} target="_blank" rel="noopener noreferrer">
              <img src={item.thumbnail} alt="" />
            </a>
          </div>
        </Badge>
      );
    });
  }
  render() {
    return (
      <div>
        <div className="file-picker-wrapper">
          {this.imgRender()}
          {
            (this.state.files.length < MAX_FILES_COUNT) && (
              <FilePicker
                multiple
                className="file-picker-btn"
                accept="image/*"
                onBeforeSelect={onBeforeSelect}
                onChange={selected => this.onSelect(selected)}
              >
                <Icon type="add" size="lg" />
              </FilePicker>
            )
          }
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

禁用状态

import { FilePicker, Icon } from 'zarm';
ReactDOM.render(
  <div className="file-picker-wrapper">
    <FilePicker className="file-picker-btn" disabled>
      <Icon type="add" size="lg" />
    </FilePicker>
  </div>
, mountNode);

API