统一上传组件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  ResponsiveGrid,
  Box,
  Form,
  NumberPicker,
  Field,
  Switch,
  Range,
  Radio,
  Dialog,
} from '@alifd/next';

import UploadComponent from '@shihuo/upload-component';

const { Cell } = ResponsiveGrid;
const { Item } = Form;

class UploadDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageList: [],
    };
  }

  handleSuccess = (file, ...args) => {
    console.log('上传成功输出结构：', file, args);
  };
  handleError = (file, ...args) => {
    console.error('上传失败输出结构', file, args);
  };
  handleChange = (list) => {
    console.log(list);
    this.setState({
      imageList: list
        .map((el) => {
          return {
            uid: el.uid,
            name: el.name,
            state: el.state,
            url: el.url,
            downloadURL: el.downloadURL,
            imgURL: el.imgURL,
          };
        })
        .filter((el) => el.url),
    });
  };
  beforeUploadVolumeError = (e) => {
    console.error('beforeUpload阶段文件大小校验不通过，参数：%o', e);
  };
  beforeUploadRatioError = (e) => {
    console.error('beforeUpload阶段比例校验不通过，参数：%o', e);
  };
  beforeUploadSizeError = (e) => {
    console.error('beforeUpload阶段尺寸校验不通过，参数：%o', e);
  };
  handleValidateError = (e) => {
    console.error('onValidateError完整校验失败信息，参数：%o', e);
    Dialog.confirm({
      content: e.errorMessage,
    });
  };

  render() {
    const { imageList } = this.state;
    const { shape, validate, preventMessage, volume, ratio, widthRange, heightRange, blockCheck } =
      this.props;

    return (
      <Box spacing={10}>
        <div>
          <UploadComponent
            shape={shape ? 'integrate' : 'card'}
            validate={validate}
            blockCheck={blockCheck}
            preventMessage={preventMessage}
            volume={volume}
            ratio={ratio === '1:1||3:4' ? ['1:1', '3:4'] : ratio}
            widthRange={widthRange}
            heightRange={heightRange}
            onOpenTool={() => {}}
            listType="text"
            // value={imageList}
            onChange={this.handleChange}
            onSuccess={this.handleSuccess}
            onUploadWay={console.log}
            formatter={console.log}
            beforeUploadVolumeError={this.beforeUploadVolumeError}
            beforeUploadRatioError={this.beforeUploadRatioError}
            beforeUploadSizeError={this.beforeUploadSizeError}
            onValidateError={this.handleValidateError}
            onError={this.handleError}
          />
        </div>
      </Box>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.field = new Field(this, {
      values: {
        validate: true,
        preventMessage: false,
        shape: true,
        volume: 2,
        ratio: '1:1',
        widthRange: [600, 2500],
        heightRange: [600, 2500],
        blockCheck: false,
      },
    });
    this.state = {};
  }

  render() {
    return (
      <ResponsiveGrid gap={20}>
        <Cell colSpan={12}>
          <Form field={this.field}>
            <Item label="是否开启预定义校验模式">
              <Switch name="validate" />
            </Item>
            <Item label="整合控件模式">
              <Switch name="shape" />
            </Item>
            <Item label="阻止弹出内置message提示框">
              <Switch name="preventMessage" />
            </Item>
            <Item label="阻断校验">
              <Switch name="blockCheck" />
            </Item>
            <Item label="大小限制(M)">
              <NumberPicker step={0.001} name="volume" />
            </Item>
            <Item label="图片比例">
              <Radio.Group name="ratio">
                <Radio value="1:1">1:1</Radio>
                <Radio value="3:4">3:4</Radio>
                <Radio value="1:1||3:4">3:4或1:1</Radio>
                <Radio value={null}>无</Radio>
              </Radio.Group>
            </Item>
            <Item label="宽度范围">
              <Range
                name="widthRange"
                style={{ width: 400 }}
                tooltipVisible
                min={0}
                max={2500}
                step={100}
                slider="double"
                marks={5}
              />
            </Item>
            <Item label="高度范围">
              <Range
                name="heightRange"
                style={{ width: 400 }}
                tooltipVisible
                min={0}
                max={2500}
                step={100}
                slider="double"
                marks={5}
                defaultValue={[600, 2500]}
              />
            </Item>
          </Form>
        </Cell>
        <Cell colSpan={12}>
          <UploadDemo {...this.field.values} />
        </Cell>
      </ResponsiveGrid>
    );
  }
}

ReactDOM.render(<App />, mountNode);