Skip to content

uxcore/uxcore-uploader

Repository files navigation

Uxcore Uploader

npm package


uxcore-uploader component for react

$ git clone https://github.com/uxcore/uxcore-uploader
$ cd uxcore-uploader
$ npm start

see https://uxco.re/components/uploader/ for details.

上传组件, 封装UploadCore核心组件, 作为UI层.

API

reset()

重置文件队列

Props

name type default Since Ver. description
className
locale string zh-cn 1.1.10 国际化,目前支持 zh-cn, en-uspl-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, 覆盖

fileList 的最小格式 (格式稍显麻烦,是为了 onChange 的返回值可以传回给 fileList)

[
    {
        name: '', // 文件名称,列表形式必填
        ext: '', // 文件扩展名。例如 jpg。可选,不填时无法根据类型展示对应图标
        fileType: '', // 文件 mimetypes 类型。 例如 image/jpg。 可选,不填时无法根据类型展示对应图标
        response: {
            url: xxx,  // 文件链接,必填
            canRemove: true, // 是否可以删除,可选
            downloadUrl: 'xxxx', // 下载 URL,可选
        }
    }
]

fileList 更新说明

Since 3.3.10 版本,当前已存在的文件列表数据不需要自己再组装一个 response 结构,组件内部会根据顶层数据来组装:

[
  {
    name: 'My File',
    ext: '.jpg',
    fileType: 'image/jpg',
    url: 'https://www.foo.bar/aaa.jpg',
    previewUrl: '', // 可选
    canRemove: true // 可选
  }
]

Events

name arguments description
onChange fileList 在上传成功或文件移除后触发,返回文件队列,包括自己传入的fileList
onCancel file 文件移除后触发,上传的文件和默认列表的文件格式会有所不同,文件格式参见下面的 fileList 格式
onfileuploaderror File, Error 文件上传失败

onChange 的 fileList 的枚举格式有如下几种

[
    // 上传后的文件的格式, 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 相对应
    }
]

Other Events

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.