@beisen/form-uploader/story/index.js

form file image uploader

import React, {
  Component,
  PropTypes
} from 'react'
import {
  render
} from 'react-dom'

import App from '../lib/index.js';
import Data from './titaFile.js'; // 模拟数据
// import PopLayer from '@beisen/PopLayer'
// debugger
class Demo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      // required: true,
      labelText: '附件', // 左侧文字
      labelTip: '单个附件最大不超过10M', // 右侧提示信息
      multiple: true,
      url: 'http://localhost:8080/sywwg/zhong',
      status: 'edit',
      extendData: {
        name: 'zz'
      },
      acceptData: 'image/JPG, image/png, image/jpeg, image/bmp, image/gif, image/tif',
      fileInputName: 'upload',
      fileType: [],
      hasLoadFile: Data,
      fileSize: "10M",
      hidden: false,
      disabled: false,
      required: true,
      onceUploadCount: 2,
      allUploadConut: 3,
      previewText: '预览',
      // onSuccess: (event, response, allFiles) => console.log('onSuccess回调',event, response, allFiles), // 发送数据成功返回回调 event ajax事件对象 response 当前上传成功的响应 allFiles 所有上传的文件
      onceUploadCount: 2,
      allUploadConut: 3,
      previewText: '下载',
      errorMessage: {error:true, messages:'必填'}, //错误信息
      onSuccess: (event, response, allFiles) => console.log(event, response, allFiles), // 发送数据成功返回回调 event ajax事件对象 response 当前上传成功的响应 allFiles 所有上传的文件
      onFailure: (event) => console.log(event), // 请求错误回调 event ajax事件对象
      onProgress: (event) => console.log(event), // 请求过程回调 event ajax事件对象
      onDragOver: (event) => console.log(event), // 文件拖至区域 event
      onDragLeave: (event) => console.log(event), // 文件离开区域 event 
      onDrop: (event) => console.log(event), // 拖至区域 event
      onDelete: (file) => console.log(file) // 删除文件
    }
  }

  changeStatus() {
    if (this.state.status == 'edit') {
      this.state.status = 'show';
    } else {
      this.state.status = 'edit';
    }
    this.setState(this.state);
  }

  render() {
    const {
      status
    } = this.state;
    return (
      <div>
      	  <App {...this.state}>
            
      	  </App>
          {/*<progress value='100' max="100"></progress>
          <button onClick={::this.changeStatus}>change</button>*/}    
      </div>
    )
  }
}

module.exports = Demo;