uxcore-uploader

    3.7.3 • Public • Published

    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.

    Install

    npm i uxcore-uploader

    DownloadsWeekly Downloads

    51

    Version

    3.7.3

    License

    MIT

    Unpacked Size

    305 kB

    Total Files

    54

    Last publish

    Collaborators

    • taoqili
    • onbing
    • eternalsky
    • alex.mm
    • ex90rts
    • lzf0402