form-uploader

• ie10以上/Ajax2 支持完美

参数

props

const props = {
  hidden: false,      // 是否渲染 默认false
  readOnly: false,
  disabled: false,    // 是否禁用 默认false
  briefDescription: "帮助文字帮助文字帮助文字帮助文字帮助文字帮助文字", //帮助文字
  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,
    message: '必填'
  }, 
  previewUrl: "www.baidu.com",
  uploadType: 'BC_PictureUploader', // BC_PictureUploader和BC_FileUploader 根据不同类型提示不同验证信息
  isDrag: true,                     // 拖拽默认有 默认true
  withCredentials:false,            // 文件上传xhr对象的withCredentials属性
  uploadText:'上传',                 // 上传按钮文字，默认 "上传"
  onSuccess: (event, response) => console.log(event, response, allData, uploadDone), // 上传成功 参数 ajax event , response, allData所有上传的数据， uploadDone所有文件上传成功后的回调
  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')
  onceUploadFiles:(number) => {},              //上传完单个文件后的回调
  onPreviewImg:(url) =>{},                     //点击预览后的回调
  translation: {
      fileSizeZeroError: '文件大小不许为0字节！',
      previewDownloadText: '下载',
      reUploadText: '重新上传',
      uploadOnceLimit: '单次上传文件数不能超过',
      uploadOnceLimitUnit: '个',
      fileNameContainsCommaError: '文件名不允许包含符号","',
      allFilesCountLimit: '总文件数不能超过',
      allFilesCountLimitUnit: '个',
      emptyText: '- 空 -'
    }  
}

使用方法

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
  briefDescription: "帮助文字帮助文字帮助文字帮助文字帮助文字帮助文字", //帮助文字
  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>
  )
}