qm-bus/src/UploadBox/index.js

千米公有云业务组件库

import React from 'react'

import UploadPanel from './components/upload-panel'
import ProtocolPanel from './components/protocol-panel'

/**
 * UPloader 上传组件
 */
export default class Uploader extends React.Component {
  static defaultProps = {
    type: 'all', // all | pic | vedio
    limit: 10, // 文件数量限制
    pic_rule: {
      limit: 10, // 图片数量限制
      size: 2, // 文件大小限制
      filetype: 'jpeg,jpg,gif,png', // 支持的文件类型
      msg: ({ limit, size, filetype }) =>
        `图片格式仅支持：${filetype}，且一次最多上传 ${limit}张，每张不能超过 ${size}MB！`,
    },
    video_rule: {
      limit: 5, // 视频数量限制
      size: 200, // 文件大小限制
      filetype: 'mp4,avi,rmvb', // 支持的文件类型
      msg: ({ limit, size, filetype }) =>
        `视频格式仅支持：${filetype}，且一次最多上传 ${limit}个，每个不能超过 ${size}MB！`,
    },
    close: () => {},
    setTitle: () => {}, // 修改
  }

  constructor(props) {
    super(props)
    this.state = {
      view: 'upload', // upload | prot
    }
  }

  render() {
    const { type, close, limit, pic_rule, video_rule } = this.props
    const { view } = this.state

    return (
      <div style={{ overflow: 'auto', display: '-webkit-box' }}>
        <div style={{ width: '100%', display: view === 'upload' ? 'block' : 'none' }}>
          <UploadPanel
            type={type}
            close={close}
            limit={limit}
            pic_rule={pic_rule}
            video_rule={video_rule}
            switchView={this.switchView}
          />
        </div>
        <div style={{ width: '100%', display: view === 'upload' ? 'none' : 'block' }}>
          <ProtocolPanel switchView={this.switchView} />
        </div>
      </div>
    )
  }

  /**
   * switch view
   */
  switchView = view => {
    let title = view === 'upload' ? '选择文件上传' : '媒体素材上传服务协议'
    const { setTitle } = this.props
    setTitle && typeof setTitle === 'function' && setTitle(title)
    this.setState({ view })
  }
}