# 上传组件

- 目前仅实现上传帮助类Helper，上传组件部分依然使用antd里的Upload即可
- Helper与Upload结合使用，只需在Upload上加一行代码即可，详情见下：

## Helper的使用
- 引入Helper
```
import {CJUpload} from '@cjfed/cjfec';
const UploadHelper = CJUpload.Helper;
```

### 与antd Upload组件配合使用

- 默认使用

```
import { Upload, message, Button, Icon } from 'antd';
import {CJUpload} from '@cjfed/cjfec';
const UploadHelper = CJUpload.Helper;

const props = {
    customRequest: UploadHelper.customRequest(), // 绑定Helper中的上传函数
    onChange (info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            if (info.file.response.uploaded) {
                message.success(`${info.file.name} 文件快传成功`);
            } else {
                message.success(`${info.file.name} 文件上传成功`);
            }
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 文件上传失败！.`);
        }
    }
}

ReactDOM.render(
    <Upload {...props}>
        <Button>
            <Icon type="upload" /> Click to Upload
        </Button>
    </Upload>
)
```

- 自定义上传参数

```
import { Upload, message, Button, Icon } from 'antd';
import {CJUpload} from '@cjfed/cjfec';
const UploadHelper = CJUpload.Helper;

const props = {
    customRequest: UploadHelper.customRequest({ // 绑定自定义上传函数
        quickUpload: false // 不使用快传
    }),
    onChange (info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} 文件上传成功`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 文件上传失败！.`);
        }
    }
}

ReactDOM.render(
    <Upload {...props}>
        <Button>
            <Icon type="upload" /> Click to Upload
        </Button>
    </Upload>
)
```

### 单独使用

- 上传单个文件
```
UploadHelper.upload(file)
    .then(uploadResult => {
        console.log(uploadResult);
        // 输出: {fileId: xxx, url: xxx}
    })
    .catch(e => {
        console.error(e.message);
    });
```

- 上传多个文件
```
UploadHelper.upload([file1, file2])
    .then(uploadResult => {
        console.log(uploadResult);
        // 输出: [{fileId: xxx, url: xxx}, {fileId: xxx, url: xxx}]
    })
    .catch(e => {
        console.error(e.message);
    });
```

- 不采用快传
```
UploadHelper.upload(file, {quickUpload: false})
    .then(uploadResult => {
        console.log(uploadResult);
        // 输出: {fileId: xxx, url: xxx}
    })
    .catch(e => {
        console.error(e.message);
    });
```

- 自定义连接
```
UploadHelper.upload(file, {
        quickUploadUrl: 'api/upload/quick-upload',
        getOssParamsUrl: 'api/upload/oss-parameters/batch' // 要传批量获取的连接
    })
    .then(uploadResult => {
        console.log(uploadResult);
        // 输出: {fileId: xxx, url: xxx}
    })
    .catch(e => {
        console.error(e.message);
    });
```

- 仅使用快传功能
```
UploadHelper.getInstance()
    .quickUpload(file)
    .then(uploadResult => {
        console.log(uploadResult);
        // 已上传文件输出: {uploaded: true, fileId: xxx, url: xxx}
        // 未上传文件输出: {
        //     uploaded: false,
        //     paramters: {} // 与getOssParam返回的参数一致
        // }
    })
    .catch(e => {
        console.error(e.message);
    });
```

- 仅使用md5功能
```
UploadHelper.getInstance()
    .md5(file)
    .then(quickUploadParams => {
        console.log(quickUploadParams);
        // 输出: {extension: xxx, md5: xxx, size: xxx}
    })
    .catch(e => {
        console.error(e.message);
    });
```

- 取消上传

```js
import { Upload, Button, Icon } from 'antd';
import {CJUpload} from '@cjfed/cjfec';
const UploadHelper = CJUpload.Helper;

// 取消函数名
let abort;

// 自定义上传
const props = {
    customRequest: UploadHelper.customRequest({
        // 配置参数，以回调函数方式获取取消上传函数
        getAbort: e => {abort = e}
    }),
    onChange (info) {}
}

return (
    <div>
        <Upload {...props}>
            <Button>
                <Icon type="upload" /> Click to Upload
            </Button>
        </Upload>
        // 在需要的地方调用取消上传函数即可
        <Button onClick={() => {abort()}} >取消上传</Button>
    </div>
)


// 单独使用的使用方式与自定义上传相同
UploadHelper.upload(file, {
    // 配置参数，以回调函数方式获取取消上传函数
    getAbort: e => {abort = e}
})
```

## Api
| 参数            | 说明                        |  类型         |  默认值  |
| --------        | :-----                      | :----         |:----  |
| quickUpload     | 开启快速上传                |   boolean     |  true  |
| quickUploadUrl  | 快速上传地址                |   string      | 'api/upload/quick-upload' |
| getOssParamsUrl | 获取oss参数地址             |  string   |   'api/upload/oss-parameters/batch' |
| md5ChunkSize    | md5算法读取文件时的chunk大小  |  number  |  1024 * 1024 |
| onProgress      | 获取上传进度                |  (e: any) => void    |  无  |
| getAbort        | 取消上传                    |  (abort: any) => void  |  无  |
| setOssParams    | 设置oss参数                 |  (file) => object  |  无  |