{"id":19175712,"url":"https://github.com/24jieqi/react-native-upload","last_synced_at":"2025-08-12T23:02:40.347Z","repository":{"id":41683061,"uuid":"410479205","full_name":"24jieqi/react-native-upload","owner":"24jieqi","description":"📷 React Native Component to upload files and preview","archived":false,"fork":false,"pushed_at":"2023-11-23T03:23:57.000Z","size":9034,"stargazers_count":20,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-20T01:33:04.593Z","etag":null,"topics":["react-native","upload"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/24jieqi.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}},"created_at":"2021-09-26T07:15:07.000Z","updated_at":"2025-02-13T06:13:35.000Z","dependencies_parsed_at":"2023-02-19T15:31:46.610Z","dependency_job_id":"a66dc0ea-7af1-4a73-9339-084f324de8f9","html_url":"https://github.com/24jieqi/react-native-upload","commit_stats":{"total_commits":130,"total_committers":5,"mean_commits":26.0,"dds":0.07692307692307687,"last_synced_commit":"ab19a80a0ca1a816ef4a530f066e0030e62a2eb2"},"previous_names":["24jieqi/react-native-upload","hjfruit/react-native-upload2"],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24jieqi%2Freact-native-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24jieqi%2Freact-native-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24jieqi%2Freact-native-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24jieqi%2Freact-native-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/24jieqi","download_url":"https://codeload.github.com/24jieqi/react-native-upload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252940934,"owners_count":21828769,"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":["react-native","upload"],"created_at":"2024-11-09T10:24:41.611Z","updated_at":"2025-05-07T19:10:39.150Z","avatar_url":"https://github.com/24jieqi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"@fruits-chain/react-native-upload\n\n\u003e 一个用于文件上传的 React-Native 组件\n\n- 支持图片、视频以及文件上传\n- 支持图片/视频压缩（Android \u0026 iOS）使用[react-native-compressor](https://github.com/Shobbak/react-native-compressor)\n- 支持断点续传\n- 支持多图片\u0026视频预览以及自定义文件类型预览\n- 可自定义上传后的显示 UI\n- 内置一套相机拍摄 UI（欢迎使用）\n- 图片水印，支持文本和图片 overlay 的形式\n\n## 安装\n\n1. 安装 `@fruits-chain/react-native-upload`\n\n```bash\n$ yarn add @fruits-chain/react-native-upload\n```\n\n安装依赖库\n\n\\*[react-native-blob-util](https://github.com/RonRadtke/react-native-blob-util) 基础文件操作\n\n[react-native-fs](https://github.com/itinance/react-native-fs) 文件操作（计算 hash 值）\n\n[react-native-compressor](https://github.com/Shobbak/react-native-compressor) 图片\u0026视频压缩\n\n\\*[react-native-image-crop-picker](https://github.com/ivpusic/react-native-image-crop-picker) 图片\u0026视频拍摄、选择\n\n[react-native-video](https://github.com/react-native-video/react-native-video) 视频播放组件\n\n[react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) 高效图片组件\n\n[react-native-document-picker](https://github.com/rnmods/react-native-document-picker) 文档选择\n\n[react-native-photo-manipulator](https://github.com/guhungry/react-native-photo-manipulator) 图片水印\n\n\\*[react-native-vision-camera](https://github.com/mrousavy/react-native-vision-camera) 自定义上传 UI 使用的拍照库\n\n⭐️[@fruits-chain/react-native-xiaoshu](https://github.com/hjfruit/react-native-xiaoshu) RN 基础组件库，提供模式选择器和图片列表渲染等组件\n\n根据依赖库指引进行设置，带“\\*”的表示需要设置配置权限\n\n## 使用\n\n```js\nimport React, { Component } from 'react'\nimport { render } from 'react-dom'\nimport Upload from '@fruits-chain/react-native-upload'\nconst UploadPage: React.FC = () =\u003e {\n  const [images, setImages] = useState([])\n  const [document, setDoucument] = useState([])\n  return (\n    \u003cView\u003e\n      \u003cUpload uploadAction={...} tipText={langs.picsAndVideo} maxCount={10} list={images} onChange={(val) =\u003e setImages(val)} /\u003e\n      \u003cUpload.Preview list={images} /\u003e\n      // tip: 使用`Upload.Wrapper`的方式不会渲染默认操作UI，可进行自定义显示\n      \u003cUpload.Wrapper uploadAction={...} tipText={langs.picsAndVideo} maxCount={10} list={images} onChange={(val) =\u003e setImages(val)} \u003e\n        \u003cText\u003e上传文件\u003c/Text\u003e\n      \u003c/Upload.Wrapper\u003e\n      \u003cView\u003e\n        {\n          images.map(image =\u003e ...)\n        }\n      \u003c/View\u003e\n      // 文档上传\n      \u003cUpload mediaType=\"document\" uploadAction={...} tipText=\"文件\" maxCount={10} list={document} onChange={(val) =\u003e setDocument(val)} /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n### 屏幕截图\n\n\u003cdiv style=\"display: flex; flex-wrap: no-wrap\"\u003e\n  \u003cimg alt=\"默认\" src=\"./case-1.png\" width=200 height=433 /\u003e\n  \u003cimg alt=\"模式选择\" src=\"./case-2.png\" width=200 height=433 /\u003e\n  \u003cimg alt=\"包含照片\" src=\"./case-3.png\" width=200 height=433/\u003e\n  \u003cimg alt=\"图片预览\" src=\"./case-4.jpg\" width=200 height=433 /\u003e\n\u003c/div\u003e\n\n### 可运行的 Demo\n\n见[example](./example)目录\n\n\u003e 注意：正常运行前需要使用各自的上传接口\n\n### API\n\n\u003e `？`表示可选参数\n\n| 参数                  | 类型                                                           | 说明                                                                              | 默认值                         | 版本  |     |\n| --------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------ | ----- | --- |\n| list?                 | `IUploadSource`[]                                              | 当前上传的文件列表                                                                | -                              | -     |     |\n| defaultList?          | `IUploadSource`[]                                              | 默认上传的文件列表                                                                | []                             | -     |     |\n| onChange?             | (list:`IUploadSource`[]) =\u003e void                               | 上传文件变更/状态变更时调用此方法                                                 | -                              | -     |     |\n| onUploadError?        | (msg?: any) =\u003e void                                            | 上传出错时的回调                                                                  | -                              | -     |     |\n| maxCount?             | number                                                         | 最大可上传数量                                                                    | 10                             | -     |     |\n| tipText?              | string                                                         | 上传提示文本                                                                      | -                              | -     |     |\n| multiple?             | boolean                                                        | 是否支持多选上传                                                                  | true                           | -     |     |\n| uploadAction?         | `UploadAction`                                                 | 上传接口封装的函数                                                                | -                              | -     |     |\n| cropping?             | boolean                                                        | 是否进行裁剪                                                                      | false                          | -     |     |\n| width?                | number                                                         | cropping 模式下选取图片的宽度                                                     | 300                            | -     |     |\n| height?               | number                                                         | cropping 模式下选取图片的高度                                                     | 300                            | -     |     |\n| allowResume?          | `boolean or number`                                            | 是否支持续传（传入 `number`时表示只有压缩后大于 `number`字节的文件会开启续传      | false                          | 1.2.0 |     |\n| progressAction?       | (fileHash: string) =\u003e Promise\u003c{fileUrl: string; size: number}\u003e | 获取上传当前图片上传进度                                                          | -                              | 1.2.0 |     |\n| compress?             | boolean                                                        | 是否开启压缩                                                                      | true                           | 1.2.0 |     |\n| imagesPerRow?         | number                                                         | 每一行显示的个数                                                                  | 4                              | 1.3.8 |     |\n| count?                | `number or RegularCount[]`                                     | 固 regular 模式下，设置固定上传个数及文案                                         | -                              | 1.3.9 |     |\n| customPreview?        | `CustomPreview`                                                | 自定义预览的组件映射 key: 文件名后缀 value:自定义预览组件                         | -                              | 1.4.0 |     |\n| pickerType?           | `PickerType or PickerType[]`                                   | 指定选择器类型                                                                    | ['cropPicker', 'visionCamera'] | 2.0.0 |     |\n| cropPickerMediaType?  | `CropMediaType`                                                | pickerType 为 cropPicker 的 mediaType                                             | `any`                          | 2.0.2 |     |\n| title                 | string                                                         | 用于 pickerType 为 `visionCamera`时 UI 的标题                                     | -                              | 2.0.0 |     |\n| watermark?            | `WatermarkOperations`                                          | 配置图片水印，`2.3.0`支持图片作为水印                                             | -                              | 2.1.0 |     |\n| backUpload?           | boolean                                                        | 是否启用后台上传（启用后不会执行文件上传动作）                                    | false                          | 2.2.0 |     |\n| shouldPrintWatermark? | boolean or `PrintWaterMarkFn`                                  | 是否绘制水印                                                                      | true                           | 2.4.0 |     |\n| beforeDelete?         | `UploadItem[] \\| boolean \\| Promise\u003cUploadItem[] \\| boolean\u003e ` | 删除前的钩子函数，返回 `boolean` 表示是否继续，返回数据将会替换默认结果，支持异步 | -                              | 2.4.1 |     |\n\n```ts\ninterface UploadItem {\n  key: string // 当前资源的唯一标识\n  path?: string // 本地资源路径\n  name?: string // 名称\n  type?: string // 类型\n  status?: 'loading' | 'done' | 'error' // 资源状态\n  origin?: FileVO // 远程上传结果\n  /**\n   * 本地文件资源路径\n   */\n  uri?: string\n  /**\n   * 切分后的文件资源路径\n   */\n  sliceUri?: string\n  /**\n   * 文件大小\n   */\n  size?: number\n  /**\n   * 文件hash值\n   */\n  hash?: string\n  /**\n   * 当次文件偏移\n   */\n  offset?: number\n  /**\n   * 当前文件是否需要断点续传\n   */\n  resume?: boolean\n  /**\n   * 是否可删除\n   * @default true\n   */\n  deletable?: boolean\n}\n\nexport type UploadAction = ({ data, file }: UploadActionParams) =\u003e Promise\u003cFileVO\u003e\n\ninterface FileVO {\n  /** 文件ID */\n  fileId?: string\n\n  /** 文件上传时间戳 */\n  fileUploadTime?: number\n\n  /** 文件地址 */\n  fileUrl?: string\n\n  /** 文件名称 */\n  filename?: string\n}\n```\n\n### 缓存\n\n\u003e 此上传组件在文件压缩/断点续传等阶段会产生大量的缓存文件，并且默认不会清除，在 `2.2.0`版本，提供了两个 API 来快速感知上传缓存和清除缓存，你也可以通过 `UPLOAD_CACHE_DIR`获取缓存目录从而更灵活的实现清除缓存的功能\n\n#### `function cacheDirStat(): Promise\u003cCacheDirStat\u003e`\n\n\u003e 获取文件上传缓存文件夹的统计信息\n\n#### `function clearCache(): Promise\u003cClearCacheResult\u003e`\n\n\u003e 清除上传文件夹缓存\n\u003e ⚠️ 清除缓存后，再次上传同一文件的处理效率将会下降\n\n具体使用方式见[example](./example)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F24jieqi%2Freact-native-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F24jieqi%2Freact-native-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F24jieqi%2Freact-native-upload/lists"}