@beisen/FormUploader

FormUploader

• ie10以上/Ajax2 支持完美

参数

props

hidden: false, // 是否渲染 默认false
disabled: false, // 是否禁用 默认false
status: 'edit', // 显示状态 edit 编辑态 show 显示态
hasLoadFile: [], // 已经上传的文件 show状态下 显示文件
labelText: '', // 左侧文字
labelTip: '', // 右侧提示信息
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
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) // 删除文件

使用方法

1.安装npm组件包

npm install @beisen/FormUploader --save-dev

2.引用组件

import FormUploader from "@beisen/FormUploader"

3.传入参数

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

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: "1Mb",
  hidden: false,
  disabled: false,
  required: true,
  onceUploadCount: 3,
  allUploadConut: 6,
  previewText: '下载',
  errorType: "1", //"0"是按钮下方的提示信息，"1"是文件列表下方的提示信息
  errorMessage: "你传的这个东西不对！", //错误信息
  errorShow: true, //true时显示错误信息，false时不显示
  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) // 删除文件
}

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