@beisen/form-uploader/index.js

form file image uploader

/* eslint-disable */
import React, {
  Component,
  PropTypes
} from 'react'
import {
  render
} from 'react-dom'

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

  constructor(props) {
    super(props);
    this.state = {
      labelText: '附件', // 左侧文字
      labelTip: '单个附件最大不超过10M', // 右侧提示信息
      multiple: false,
      url: 'http://localhost:3001/uploadFile',
      status: 'edit',
      briefDescription: "帮助文字帮助文字帮助文字帮助文字帮助文字帮助文字", //帮助文字
      extendData: {
        name: 'zz'
      },
      acceptData: '',
      fileInputName: 'upload',
      // fileType: ['jpeg','JPEG','pdf','PDF','docx','DOCX','xlsx','XLSX','ppt','PPT','rar','RAR','txt','TXT','xls','XLS','doc','zip','ZIP','jpg','JPG','gif','GIF','png','PNG','pptx','PPTX','mmap','MMAP'],
      hasLoadFile: Data,
      fileSize: "10M",
      hidden: false,
      disabled: false,
      required: true,
      // onceUploadCount: 2,
      // allUploadConut: 3,
      previewText: '预览',
      // onSuccess: (event, response, allFiles) => console.log('onSuccess回调'), // 发送数据成功返回回调 event ajax事件对象 response 当前上传成功的响应 allFiles 所有上传的文件
      onceUploadCount: 1,
      allUploadConut: 1,
      previewText: '下载',
      // editdisplaystate: 'readonly',
      previewUrl:"www.baidu.com",
      readOnly: false,
      errorMessage: {error:true, message:'必填'}, //错误信息
      helpMsg:"wddqwdq",
      uploadType: 'BC_PictureUploader', // BC_PictureUploader和BC_FileUploader 根据不同类型提示不同验证信息
      lablePos: true, //label位置，true时在左边，false在上边
      lableTxt: true, //label中文字对齐方式，true左对齐，false右对齐
      onSuccess: (event, response, allFiles) => console.log('onSuccess->'), // 发送数据成功返回回调 event ajax事件对象 response 当前上传成功的响应 allFiles 所有上传的文件
      onFailure: (event,messages,files) => console.log('onFailure->'), // 请求错误回调 event ajax事件对象
      onProgress: (event) => console.log('onProgress->'), // 请求过程回调 event ajax事件对象
      onDragOver: (event) => console.log('onDragOver->'), // 文件拖至区域 event
      onDragLeave: (event) => console.log('onDragLeave->'), // 文件离开区域 event
      onDrop: (event) => console.log('onDrop->'), // 拖至区域 event
      onDelete: (file) => console.log('onDelete->'), // 删除文件
      onceUploadFiles:(number) => console.log('onceUploadFiles'),
      onPreviewImg: () => {console.info("预览图片")},
      // cutsomFileTypeErrorTip: "仅支持excel",
      uploadText: '上&传',
      cutsomFileTypeErrorTip: '仅支持excel',
      translation: {
          fileSizeZeroError: '文件大小不许为0字节！tt',
          previewDownloadText: '下载tt',
          reUploadText: '重新上传TT',
          uploadOnceLimit: '单次上传文件数不能超过tt',
          uploadOnceLimitUnit: '个tt',
          fileNameContainsCommaError: '文件名不允许包含符号","tt',
          allFilesCountLimit: '总文件数不能超过tt',
          allFilesCountLimitUnit: '个tt',
          emptyText: '- 空 -tt'
      }
    }
  }

  changeStatus() {
    // if (this.state.status == 'edit') {
    //   this.state.status = 'show';
    // } else {
    //   this.state.status = 'edit';
    // }
    let data = [{
      	"Status": true,
      	"Msg": "文件上传成功",
      	"Exception": null,
      	"Name": "9319f9abf8bd4cbc8www22323423421234w9234265bada572 (1).txt",
      	"Path": "dfs://BeisenCloudSystemFile/204233/43770cd00324469a9714c11204a17c9e.png",
      	"DownLoadUrl": "//dfiles.italent.link/download/BeisenCloudDemoFile/100002/0b46f0887bcf4f9fb51dc72c2e98b9cf.png",
      	"ClientUrl": "//dfiles.italent.link/BeisenCloudDemoFile/100002/0b46f0887bcf4f9fb51dc72c2e98b9cf.png"
      }]
    this.setState({hasLoadFile: data});
  }

  render() {
    const {
      status
    } = this.state;
    return (
      <div style={{width:"400px"}}>
      	  <App {...this.state}>

      	  </App>
          <button onClick={::this.changeStatus}>change</button>
          {/*<progress value='100' max="100"></progress>
          <button onClick={::this.changeStatus}>change</button>*/}
      </div>
    )
  }
}
render(<Demo />, document.getElementById('content'))