# bee-upload

> upload ui component for react

Latest version **2.1.5** (published 2021-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install bee-upload
pnpm add bee-upload
yarn add bee-upload
bun add bee-upload
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.5 |
| Published | 2021-03-23 |
| First published | 2016-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 7 |
| Unpacked size | 170.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cnkvkens, yonyoufed, jonyw, guoyongfeng, kvkens, whizbz, npm_yx, bjyxszd, tinper-bot, houjitong, gaox2025f, gcht163, ahua52 |
| Keywords | react, react-component, react-upload, iuap-design, neoui-react, upload |

## Links

- npm: https://www.npmjs.com/package/bee-upload
- Repository: https://github.com/tinper-bee/upload
- Issues: https://github.com/tinper-bee/upload/issues
- npm.io page: https://npm.io/package/bee-upload

## Dependencies (7)

- [warning](https://npm.io/package/warning.md) 2.x
- [bee-icon](https://npm.io/package/bee-icon.md) ^1.0.3
- [bee-modal](https://npm.io/package/bee-modal.md) ^2.1.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [bee-animate](https://npm.io/package/bee-animate.md) ^1.0.0
- [tinper-bee-core](https://npm.io/package/tinper-bee-core.md) latest
- [bee-progress-bar](https://npm.io/package/bee-progress-bar.md) latest

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.5 (latest) — 2021-03-23
- 2.0.5-alpha.2 (alpha) — 2019-10-14
- 2.1.4 — 2021-01-26
- 2.1.3 — 2020-04-24
- 2.1.2 — 2020-04-08
- 2.1.1 — 2020-01-17
- 2.1.0 — 2020-01-15
- 2.0.8 — 2019-12-20
- 2.0.7 — 2019-12-17
- 2.0.6 — 2019-11-22
- 2.0.5 — 2019-10-17
- 2.0.5-alpha.1 — 2019-10-14
- 2.0.5-alpha.0 — 2019-10-14
- 2.0.4 — 2019-10-11
- 2.0.4-alpha.0 — 2019-10-11
- … 24 more at https://npm.io/package/bee-upload/versions

## README

# bee-upload
[![npm version](https://img.shields.io/npm/v/bee-upload.svg)](https://www.npmjs.com/package/bee-upload)
[![Build Status](https://img.shields.io/travis/tinper-bee/bee-upload/master.svg)](https://travis-ci.org/tinper-bee/bee-upload)
[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-upload.svg)](https://david-dm.org/tinper-bee/bee-upload#info=devDependencies)

通过Upload可以将资源（web page,text,picture,video...）传到远程服务器

## 使用

### 使用单独的Upload包
#### 组件引入
先进行下载Upload包
```
npm install --save bee-upload
```
组件调用
```js
import { Upload } from 'bee-upload';

const props = {
  name: 'file',
  action: '/upload.do',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      console.log(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      console.log(`${info.file.name} file upload failed.`);
    }
  },
};

class Demo1 extends Component {
	render(){
		return( 
			<Upload {...props}>
        <Button type="primary" shape="border">
          <Icon type="upload" /> Click to Upload
        </Button>
      </Upload>
		)
	}
}

React.render(<Demo1 />, document.getElementById('target'));
```
#### 样式引入
- 可以使用link引入dist目录下upload.css
```
<link rel="stylesheet" href="./node_modules/build/bee-upload.css">
```
- 可以在js中import样式
```js
import "./node_modules/src/Upload.scss"
//或是
import "./node_modules/build/bee-upload.css"
```



## API

|参数|说明|类型|默认值|
|---|----|---|------|
|name|文件名|string|file|
|defaultFileList|默认已上传的文件列表|array|-|
|fileList|已上传的文件列表,多用于onChange事件里|array|-|
|action|上传的服务器地址|array|-|
|data|上传参数或者函数|Object or function|-|
|size|上传文件的大小限制单位是byte|number|1024000|
|headers|设置请求的头部信息 兼容ie10以上|object|-|
|showUploadList|是否显示上传列表|bool|true|
|multiple|是否支持多文件上传 兼容ie10以上|bool|false|
|accept|设置文件接收类型|string|-|
|beforeUpload|在上传之前执行的函数，当Promise返回false或者被拒绝，函数被中指。不兼容老ie|func|-|
|customRequest|覆盖默认的XHR,可定制自己的XMLHttpRequest|func|-|
|onChange|当上传状态改变之后执行的回调函数|func|-|
|onPreview|点击预览时执行的回调方法，参数为当前点击的上传文件对象，若要阻止默认预览需return false|func|-|
|preventDefaultPreview|点击预览时，如果要阻止默认预览请设置为true，默认值为false|func|-|
|listType|内置的样式，支持text和picture|string|'text'|
|onRemove|当删除按钮点击后触发的回调函数|func|-|
|supportServerRender|当服务器正在渲染时，是否需要打开|bool|false|

### onChange

当文件正在上传，上传成功和上传失败触发的回调函数。
当上传状态发生变化，返回下列参数。

```
{
  file: {
	   uid: 'uid',      // 唯一性id
	   name: 'xx.png'   // 文件名
	   status: 'done',  // 参数：uploading, done, error, removed
	   response: '{"status": "success"}',  // 服务器返回的参数
	},
  fileList: [ /* ... */ ], //当前文件列表
  event: { /* ... */ }, //服务器响应：包括上传进度  不兼容老的浏览器
}
```

## IE兼容

IE8/9 Note

下载弹出窗口问题

使用iframe方式上传时,响应response的`content-type`应该是 `text/plain`或者 `text/html.referense`

此外，在iframe模式下，响应的状态应始终为200 OK，否则可能会在IE 8/9中获得Access被拒绝的错误。

域问题

如果页面设置`document.domain`，则服务器应根据`_documentDomain`参数输出`document.domain`。

```
var ret = '';
if (postData._documentDomain) {
  ret += '<script>document.domain="'+postData._documentDomain+'";</script>';
}
this.body = ret + '{"url":"xx.jpq"}';

```

#### 开发调试

```sh
$ git clone https://github.com/tinper-bee/bee-upload
$ cd bee-upload
$ npm install
$ npm run dev
```

---
_Source: https://npm.io/package/bee-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._