# @beisen-cmps/form-uploader

> Ethos-form-uploader组件

Latest version **0.0.3** (published 2018-05-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-cmps/form-uploader
pnpm add @beisen-cmps/form-uploader
yarn add @beisen-cmps/form-uploader
bun add @beisen-cmps/form-uploader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-05-18 |
| First published | 2018-05-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-cmps/form-uploader
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-form-uploader
- npm.io page: https://npm.io/package/@beisen-cmps/form-uploader

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^15.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.1
- [@beisen/tool-tip](https://npm.io/package/@beisen/tool-tip.md) ^0.1.7
- [@beisen/common-func](https://npm.io/package/@beisen/common-func.md)
- [@beisen/common-label](https://npm.io/package/@beisen/common-label.md)
- [@beisen/hookformatter](https://npm.io/package/@beisen/hookformatter.md) 0.0.2

## Recent versions

- 0.0.3 (latest) — 2018-05-18
- 0.0.2 — 2018-05-17
- 0.0.1 — 2018-05-17

## README

# 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

---
_Source: https://npm.io/package/@beisen-cmps/form-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._