content: import React from 'react'
  import PropTypes from 'prop-types'
  import Dropzone from 'react-dropzone'
  
  export default class FileUpload extends React.Component{
  
      static propTypes = {
          apiUrl: PropTypes.string.isRequired,
          multiple: PropTypes.bool.isRequired,
          extraData: PropTypes.object
      }
  
      constructor(props){
          super(props)
  
          this.state={
              filesPreview:[],
              filesToBeSent:[],
              printcount:10,
              accepted: [],
              rejected: []
          }
      }
  
      onDrop(){
          console.log('yep, file drop')
      }
  
  
      handleClick(event){
  
          if ( this.state.accepted.length > 0 ) {
              var formData = new FormData();
  
              
              this.state.accepted.forEach(function(image){
                  formData.append('images', image)
              })
  
              // 有时候在上传文件的时候需要一些其他的元数据。
              if(this.props.extraData){
                  formData.append('data', JSON.stringify(this.props.extraData))
              }
              
              fetch( this.props.apiUrl , {
                  method:'POST',
                  body: formData
              })
              .then( result => result.json() )
              .then( data => {
                  console.log(data)
                  if(data.success){
                      alert( data.message)
                  } else {
                      alert( data.message)
                  }
              })
          }
          else{
              // this.props.notify('error', '')
              alert('你尚未选择任何图片')
          }
      }
  
      render() {
          const style = {
              marginTop: '10px',
              textAlign: 'center',
              color: 'grey',
              fontSize: '40px',
              border: '1px dashed grey',
              height: '60px',
              width: '60px'
          }
  
          const btnStyle={
              marginBottom: '20px'
          }
      
  
          return (
              <section>
                  <div className="dropzone">
                      <Dropzone
                          style={ style }
                          multiple={ this.props.multiple }
                          accept="image/jpeg, image/png"
                          onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }} >
                          +
                      </Dropzone>
                      <p>直接拖入文件或者点击该区域上传文件。只支持 *.jpeg和 *.png文件</p>
                  </div>
  
                  <aside>
                      <ul>
                          {
                              this.state.accepted.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
                          }
                      </ul>
                  </aside>
                  <button className="btn btn-success" style={btnStyle} onClick={this.handleClick.bind(this) }> 上传 </button>
              </section>
          )
      }
  }