form-uploader

• ie10以上/Ajax2 支持完美

参数

props

hidden: false, // 是否渲染 默认false
readOnly: false,
disabled: false, // 是否禁用 默认false
status: 'edit', // 显示状态 edit 编辑态 show 显示态
hasLoadFile: [], // 已经上传的文件 show状态下 显示文件
labelText: '', // 左侧文字
labelTip: '', // 右侧提示信息
lablePos: true, //label位置，true时在左边，false在上边
lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
hiddenTip={false}, // tooltips visibles  默认显示
sideTip={false},  // tooltips direction   默认方向 top-bottom  
url: '', // 上传地址
acceptData: '', // input accept data
multiple: false,
fileInputName: '', // input[type='file']的name
fileSize: '2mb',// mb kb b
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']
onceUploadCount: 2, // multiple时 一次可选的文件数量
allUploadConut: 2, // 总共文件上传数量
extendData: {}, // key-value
errorMessage: {error:true, messages:'必填'}, //错误信息
previewUrl:"www.baidu.com",
uploadType: 'BC_PictureUploader', // BC_PictureUploader和BC_FileUploader 根据不同类型提示不同验证信息
isDrag: true,  // 拖拽默认有 默认true
onSuccess: (event, response) => console.log(event, response), // 上传成功 参数 ajax event , response
onFailure: (event, response) => console.log(event, response), // 上传失败 参数 ajax event , response
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) // 删除文件 onceUploadFiles:(number) => console.log('onceUploadFiles')

使用方法

1.安装npm组件包

npm install @beisen/form-uploader --save-dev

2.引用组件

import FormUploader from "@beisen/form-uploader"

3.传入参数

该参数为上述参数，传入方式使用: {...参数}

this.state = {
  hidden: false, // 是否渲染 默认false
  readOnly: false,
  disabled: false, // 是否禁用 默认false
  status: 'edit', // 显示状态 edit 编辑态 show 显示态
  hasLoadFile: [], // 已经上传的文件 show状态下 显示文件
  labelText: '', // 左侧文字
  labelTip: '', // 右侧提示信息
  lablePos: true, //label位置，true时在左边，false在上边
  lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
  hiddenTip={false}, // tooltips visibles  默认显示
  sideTip={false},  // tooltips direction   默认方向 top-bottom  
  url: '', // 上传地址
  acceptData: '', // input accept data
  multiple: false,
  fileInputName: '', // input[type='file']的name
  fileSize: '2mb',// mb kb b
  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']
  onceUploadCount: 2, // multiple时 一次可选的文件数量
  allUploadConut: 2, // 总共文件上传数量
  extendData: {}, // key-value
  errorMessage: {error:true, messages:'必填'}, //错误信息
  previewUrl:"www.baidu.com",
  uploadType: 'BC_PictureUploader', // BC_PictureUploader和BC_FileUploader 根据不同类型提示不同验证信息
  isDrag: true,  // 拖拽默认有 默认true
  onSuccess: (event, response) => console.log(event, response), // 上传成功 参数 ajax event , response
  onFailure: (event, response) => console.log(event, response), // 上传失败 参数 ajax event , response
  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) // 删除文件 onceUploadFiles:(number) => console.log('onceUploadFiles')
}

render() {
  const {
    status
  } = this.state;
  return (
    <div>
        <App {...this.state}>

        </App>
        {/*<progress value='100' max="100"></progress>
        <button onClick={::this.changeStatus}>change</button>*/}    
    </div>
  )
}

gt