---
name: Upload
menu: Components
---

# Upload
import Upload from './index'
import './style/index.scss'
import RcUpload from '../../node_modules/rc-upload/lib/index';
import Button from '../button/index';
import Validator from '../validator/index';
import { Playground, Props } from 'docz'

## Props & Methods
<Props of={Upload} />

## Basic Usage
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                hasImg: 0,
                src: '',
            };
        }
        render(){
            return <>
            <RcUpload
                action="/cgi/upload"
                onSuccess={(response, file) => {
                this.setState({
                    hasImg: 1,
                    src: response.path,
                });
                console.log(file);
                }}
            >
                <Button>Click to Upload</Button>
            </RcUpload>
            {this.state.hasImg ? <img alt="demo1" width="100" src={state.demo1Src} /> : null}
            </>
        }
    }
    return <Example />
}
}
</Playground>

## Built-in Basic Style
<Playground>
    <Upload
        action="/cgi/upload"
        getImgInfo={response => {
            return {
            name: '内置基础样式',
            src: response.path,
            };
        }}
        />
</Playground>

## With Descriptions
<Playground>
    <Upload
            action="/cgi/upload"
            getImgInfo={response => {
              return {
                name: '描述信息',
                src: response.path,
              };
            }}
            desc={
              <div>
                <span>
                  图片要求
                  <a
                    href="http://ke.qq.com/docs/cover-description.jpg"
                    className="nor-link" target="_blank"
                  >点击查看课程封面模版规范</a>
                </span><br/>
                <span>尺寸大于 1080*608 分辨率小于 96dpi</span><br/>
                <span>大小小于 2M</span><br/>
                <span>支持 JPG/PNG/BMP 等格式图片</span>
              </div>
            }
          />
</Playground>

## Disabled
<Playground>
    <Upload
            disabled
            action="/cgi/upload"
            getImgInfo={response => {
              return {
                name: '禁用',
                src: response.path,
              };
            }}
          />
</Playground>

## Work with Validator
<Playground>
    <Validator
            ref={(instance) => this.uploadValidator = instance}
          >
            <Upload
              name="upload"
              action="/cgi/upload"
              getImgInfo={response => {
                return {
                  name: '默认图片',
                  src: response.path,
                };
              }}
              data-required
              data-required-msg="上传图片不能为空"
              data-patterns={[]}
              onChange={() => this.uploadValidator.checkField(undefined, 'upload')}
              msgAlign="right"
            />
          </Validator>
</Playground>

## onChange & beforeUpload
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                status: 'Nothing uploaded',
            };
            this.beforeUpload = this.beforeUpload.bind(this);
            this.onChange = this.onChange.bind(this);
            this.changeStatus = this.changeStatus.bind(this);
        }
        beforeUpload() {
            this.changeStatus('beforeUpload');
        }
        onChange(file) {
            console.log('onChange', file);
            this.changeStatus(file.status);
        }
        changeStatus(s) {
            let { status } = this.state;
            status = status.split('>');
            status.push(s);
            this.setState({
            status: status.join('>'),
            });
        }
        render(){
            return <>
            <p>状态： {this.state.status}</p><br />
            <Upload
                action="/cgi/upload"
                getImgInfo={response => {
                return {
                    name: 'onChange 事件',
                    src: response.path,
                };
                }}
                beforeUpload={this.beforeUpload}
                onChange={this.onChange}
            />
            </>
        }
    }
    return <Example />
}
}
</Playground>

## Default Image
<Playground>
    <Upload
        action="/cgi/upload"
        src="//8.url.cn/edu/edu_modules/edu-ui/img/bg/logo192-3x.e89120ba.png#unsprite"
        getImgInfo={response => {
            return {
            name: '默认图片',
            src: response.path,
            };
        }}
        />
</Playground>