{"id":27968832,"url":"https://github.com/dxcweb/react-imagepicker","last_synced_at":"2025-07-18T22:34:51.497Z","repository":{"id":82482392,"uuid":"72967118","full_name":"dxcweb/react-imagepicker","owner":"dxcweb","description":"react 版本图片选择器，提供图片选择器接口，流布局图片选择器，将来提供更多布局的图片选择器。","archived":false,"fork":false,"pushed_at":"2018-03-06T12:46:34.000Z","size":961,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-10T00:54:25.162Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dxcweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-11-06T03:11:25.000Z","updated_at":"2018-08-14T06:03:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"f9deb8ea-1a67-403f-89ec-af6ce6164b0d","html_url":"https://github.com/dxcweb/react-imagepicker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/dxcweb/react-imagepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dxcweb%2Freact-imagepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dxcweb%2Freact-imagepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dxcweb%2Freact-imagepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dxcweb%2Freact-imagepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dxcweb","download_url":"https://codeload.github.com/dxcweb/react-imagepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dxcweb%2Freact-imagepicker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265039059,"owners_count":23702078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-07T21:07:22.068Z","updated_at":"2025-07-18T22:34:51.114Z","avatar_url":"https://github.com/dxcweb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-imagepicker\nreact 版本图片选择器，提供图片选择器接口，流布局图片选择器，将来提供更多布局的图片选择器。\n## install\n\n```\nnpm install react-imagepicker --save\n```\n\n## Development\n\n```\nnpm install\nnpm start\n```\n## Example\n[http://github.dxcweb.com/react-imagepicker/](http://github.dxcweb.com/react-imagepicker/ \"http://github.dxcweb.com/react-imagepicker/\")\n\n## API\n### FlowLayoutImagePicker\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth style=\"width: 100px;\"\u003eName\u003c/th\u003e\n      \u003cth style=\"width: 50px;\"\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n\u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emax\u003c/td\u003e\n      \u003ctd\u003eInt\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e最大图片数量（非必填）\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003ecolumn\u003c/td\u003e\n      \u003ctd\u003eInt\u003c/td\u003e\n      \u003ctd\u003e4\u003c/td\u003e\n      \u003ctd\u003e每行图片数\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003espacing\u003c/td\u003e\n      \u003ctd\u003eInt\u003c/td\u003e\n      \u003ctd\u003e12\u003c/td\u003e\n      \u003ctd\u003e间距\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003egetImageUrl\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e传入一个图片信息需返回该图片的URL\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003eonAddImage\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003e当触发添加时会调用onAddImage(callback,surplus),添加完成后调用callback传入图片信息可是字符串，数组或对象\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003eonPreviewImage\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003e当触发预览时会调用onPreviewImage(value, values, i)\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003evalue\u003c/td\u003e\n      \u003ctd\u003eArray\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e所有图片信息（非必填，提供给form组件使用）\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003eonChange\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e图片信息修改后调用onChange(values) （非必填，提供给form组件使用）\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003ereadOnly\u003c/td\u003e\n      \u003ctd\u003ebool\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e只读\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### WxFlowLayoutImagePicker\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth style=\"width: 100px;\"\u003eName\u003c/th\u003e\n      \u003cth style=\"width: 50px;\"\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n\u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echooseImageCount\u003c/td\u003e\n      \u003ctd\u003eInt\u003c/td\u003e\n      \u003ctd\u003e9\u003c/td\u003e\n      \u003ctd\u003e一次选择多少张\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echooseImageSizeType\u003c/td\u003e\n      \u003ctd\u003eArray\u003c/td\u003e\n      \u003ctd\u003e['original', 'compressed']\u003c/td\u003e\n      \u003ctd\u003e可以指定是原图还是压缩图，默认二者都有\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echooseImageSourceType\u003c/td\u003e\n      \u003ctd\u003eArray\u003c/td\u003e\n      \u003ctd\u003e['album', 'camera']\u003c/td\u003e\n      \u003ctd\u003e可以指定来源是相册还是相机，默认二者都有\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emax\u003c/td\u003e\n      \u003ctd\u003eInt\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e最大图片数量（非必填）\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003ecolumn\u003c/td\u003e\n      \u003ctd\u003eInt\u003c/td\u003e\n      \u003ctd\u003e4\u003c/td\u003e\n      \u003ctd\u003e每行图片数\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003espacing\u003c/td\u003e\n      \u003ctd\u003eInt\u003c/td\u003e\n      \u003ctd\u003e12\u003c/td\u003e\n      \u003ctd\u003e间距\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003egetImageUrl\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e传入一个图片信息和类型需返回该图片的URL，类型为：preview或list\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003euploadImage\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003e当触发上传时会调用uploadImage(callback),上传完成后调用callback传入图片信息可是字符串，数组或对象\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003eonLoading\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003e当调用wx上传是调用onLoading(true),当wx上传和uploadImage结束都结束时调用onLoading(false)\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003evalue\u003c/td\u003e\n      \u003ctd\u003eArray\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e所有图片信息（非必填，提供给form组件使用）\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003eonChange\u003c/td\u003e\n      \u003ctd\u003eFunc\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e图片信息修改后调用onChange(values) （非必填，提供给form组件使用）\u003c/td\u003e\n    \u003c/tr\u003e\n\t\u003ctr\u003e\n      \u003ctd\u003ereadOnly\u003c/td\u003e\n      \u003ctd\u003ebool\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e只读\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n### ImagePickerInterface\n\n![](http://imgs.dxcweb.com/react-imagepicker.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdxcweb%2Freact-imagepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdxcweb%2Freact-imagepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdxcweb%2Freact-imagepicker/lists"}