uxcore-uploader component for react
$ git clone https://github.com/uxcore/uxcore-uploader
$ cd uxcore-uploader
$ npm startsee https://uxco.re/components/uploader/ for details.
上传组件, 封装UploadCore核心组件, 作为UI层.
重置文件队列
| name | type | default | Since Ver. | description |
|---|---|---|---|---|
| className | ||||
| locale | string | zh-cn | 1.1.10 | 国际化，目前支持 zh-cn, en-us 和 pl-pl |
| fileList | array | [] | 1.2.3 | 用于展示的文件列表, 见说明 “fileList 更新说明” |
| isOnlyImg | boolean | false | 1.2.1 | 是否以图片形式展示 |
| isVisual | boolean | false | 2.0.0 | 是否可视化展示 |
| hideUploadIcon | boolean | false | 3.2.2 | 在可视化展示下，达到容量(queueCapcity)后是否隐藏上传入口 |
| core | string/Core |
null | 唯一标识或者UploadCore对象, 防止重复创建, 当传入UploadCore对象时,下列参数和事件设置均无效 | |
| name | string | 'file' | 上传文件字段名称 | |
| url | string | '' | 响应上传服务器地址 | |
| params | object/array | null | 上传文件额外参数 | |
| headers | array | null | 上传文件额外头 | |
| withCredentials | bool | false | 上传文件是否自动附带cookie等信息 | |
| timeout | int | 0 | 上传超时限制 0表示不限制 | |
| chunkEnable | bool | false | 是否允许分片上传 | |
| chunkSize | size | 0 | 文件分片大小, 默认单位b，0不分片 | |
| chunkRetries | int | 0 | 文件分片上传重试次数 | |
| chunkProcessThreads | int | 2 | 分片上传并发数 | |
| processThreads | int | 2 | 文件上传并发数 | |
| queueCapcity | int | 0 | 队列容量，0无限; | |
| autoPending | bool | true | 是否选择后自动等待上传 | |
| multiple | bool | true | 是否多选 | |
| accept | string/array | null | 允许文件类型, chrome 下的已知问题 | |
| sizeLimit | size | 0 | 文件大小限制, 0表示不限制 | |
| preventDuplicate | bool | false | 是否防止文件重复 | |
| readOnly | bool | false | 3.0.0 | 是否以只读方式显示图片,有该属性时请fileList不能为空 |
| showErrFile | bool | true | 3.2.0 | 是否显示上传出错的文件项 |
| actionOnQueueLimit | string | error | 1.5.10 | 当队列超长时采取的策略：error, 抛错；cover, 覆盖 |
[
{
name: '', // 文件名称，列表形式必填
ext: '', // 文件扩展名。例如 jpg。可选，不填时无法根据类型展示对应图标
fileType: '', // 文件 mimetypes 类型。 例如 image/jpg。 可选，不填时无法根据类型展示对应图标
response: {
url: xxx, // 文件链接，必填
canRemove: true, // 是否可以删除，可选
downloadUrl: 'xxxx', // 下载 URL，可选
}
}
]Since 3.3.10 版本，当前已存在的文件列表数据不需要自己再组装一个 response 结构，组件内部会根据顶层数据来组装：
[
{
name: 'My File',
ext: '.jpg',
fileType: 'image/jpg',
url: 'https://www.foo.bar/aaa.jpg',
previewUrl: '', // 可选
canRemove: true // 可选
}
]| name | arguments | description |
|---|---|---|
| onChange | fileList | 在上传成功或文件移除后触发，返回文件队列，包括自己传入的fileList |
| onCancel | file | 文件移除后触发，上传的文件和默认列表的文件格式会有所不同，文件格式参见下面的 fileList 格式 |
| onfileuploaderror | File, Error |
文件上传失败 |
[
// 上传后的文件的格式， response 即服务器返回的值
{
id: 'xxxx', // 如果 response.content 中有提供
url: 'xxx', // 如果 response.content 中有提供
previewUrl: 'xxx', // 如果 response.content 中有提供
type: 'upload',
ext: file.ext,
name: file.name,
response: JSON.parse(file.response)
},
// 预览用文件的格式， `props.fileList` 相关， responce 即 `props.fileList` 里传入的格式。
{
type: 'list',
response: file
},
// 被删除的文件的格式
{
type: 'delete',
subType: 'list/upload', // 与上面两种类型对应，用于解析 response
response: file // 与上面的 subType 相对应
}
]| name | arguments | description |
|---|---|---|
| onqueueuploadstart | 队列上传开始 | |
| onqueueuploadend | 队列上传结束 | |
| onqueuefileadded | File |
队列添加了一个文件 |
| onqueuefilefiltered | File, Error |
队列过滤了一个文件 |
| onqueueerror | Error |
队列错误 |
| onstatchange | Stat |
文件统计发生变化 |
| onfileuploadstart | File |
文件上传开始 |
| onfileuploadpreparing | FileRequest |
文件上传准备时 |
| onfileuploadprepared | File, FileRequest |
文件上传准备好了 |
| onchunkuploadpreparing | ChunkRequest |
分块上传准备时 |
| onchunkuploadcompleting | ChunkResponse |
分块上传结束时 |
| onfileuploadprogress | File, Progress |
文件上传进度中 |
| onfileuploadend | File |
文件上传结束 |
| onfileuploadcompleting | FileResponse |
文件上传结束时 |
| onfileuploadsuccess | File, FileResponse |
文件上传成功 |
| onfileuploadcompleted | File, Status |
文件上传完成了 |
| onfilestatuschange | File, Status |
文件状态发生变化 |
| onfilecancel | File |
文件退出 |
| onShowFile | File, Url, Current |
自定义文件预览行为 |
具体配置信息见https://github.com/uxcore/uxcore-uploadcore/blob/master/README.md.