npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

uxcore-uploader

v3.7.4

Published

uxcore-uploader component for react

Downloads

66

Readme

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.