## Uploader上传组件

### 相关知识点
* XMLHttpRequest
* FormData
* File
* FileReader
* Blob
* Base64
* Canvas
* atob与btoa

### 组件内容
<p>上传组件目前包含以下内容</p>
<p>配置数据: 具体看API</p>
<p>支持行为: 上传文件</p>
<p>支持事件: 具体看API</p>
<p>说明: 该组件无样式,目前只提供接口,OSS直传未集成在组件内,由各个业务线自行集成,具体实现请看[工程DEMO](http://git.winbaoxian.com:8888/wy-front/hello-ui/blob/develop/src/views/Uploader.vue)</p>

### 如何使用
npm
```shell
## 未安装package
npm install hello-ui --save-dev
## 已安装package
npm update hello-ui --save-dev
```
html
```html
<div class="bx-uploader">
  <input class="bx-input-file" type="file"/>
</div>
```
import as module
```js
// 使用全部组件情况
import Hello from 'hello-ui';
var uploader = new Hello.Uploader('.bx-uploader');
// 只使用Uploader组件情况
import {Uploader} from 'hello-ui';
var uploader = new Uploader('.bx-uploader');
```

### API
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| url | 必填,上传接口url | String | null |
| type | 可选,请求method | String | Post |
| async | 可选,是否异步 | Boolean | true |
| data | 可选,请求数据 | Object | null |
| headers | 可选,请求头 | Object | null |
| xhrFields | 可选,设置XMLHttpRequest属性,如withCredentials | Object | null |
| compress | 可选,压缩参数配置 | Object | { type: 'image/png', quality: '0.92', width: null, height: null } |
| base64 | 可选,Base64数据 | String | null |
| autoUpload | 可选,是否自动上传 | Boolean | true |
| fileType | 可选,文件后缀名过滤,均小写 | Array | ['jpg','jpeg','png','gif','bmp','svg'] |
| onInit | 可选,初始化回调事件 | Function | noop |
| onBefore | 可选,添加文件后,发送请求前回调事件 | Function | noop |
| onSuccess | 可选,请求成功回调事件 | Function | noop |
| onError | 可选,错误回调事件 | Function | noop |
| onComplete | 可选,请求结束回调事件 | Function | noop |
| onProgress | 可选,文件上传进度回调事件 | Function | noop |

### Example
[功能预览](https://qiuguorong.github.io/hello-ui/dist/#/uploader)
<p></p>
简单功能, 都使用默认值
```js
var uploader = new Uploader('.bx-uploader');
```
定制功能, 可自选属性
```js
var uploader = new Uploader('.bx-uploader', {
  url: null,
  type: 'POST',
  async: true,
  data: {},
  headers: {},
  xhrFields: {},
  compress: {
    type: 'image/png',
    quality: '0.92',
    width: null,
    height: null
  },
  base64: null,
  autoUpload: true,
  fileType: [],
  onInit: Utils.noop,
  onBefore: Utils.noop,
  onSuccess: Utils.noop,
  onError: Utils.noop,
  onComplete: Utils.noop,
  onProgress: Utils.noop
});
```

### 设备兼容
暂无