You signed in with another tab or window.
Reload
to refresh your session.
You signed out in another tab or window.
Reload
to refresh your session.
You switched accounts on another tab or window.
Reload
to refresh your session.
*
react-native-blob-util
基础文件操作
react-native-fs
文件操作(计算 hash 值)
react-native-compressor
图片&视频压缩
*
react-native-image-crop-picker
图片&视频拍摄、选择
react-native-video
视频播放组件
react-native-fast-image
高效图片组件
react-native-document-picker
文档选择
react-native-photo-manipulator
图片水印
*
react-native-vision-camera
自定义上传 UI 使用的拍照库
⭐️
@fruits-chain/react-native-xiaoshu
RN 基础组件库,提供模式选择器和图片列表渲染等组件
根据依赖库指引进行设置,带“*”的表示需要设置配置权限
import React, { Component } from 'react'
import { render } from 'react-dom'
import Upload from '@fruits-chain/react-native-upload'
const UploadPage: React.FC = () => {
const [images, setImages] = useState([])
const [document, setDoucument] = useState([])
return (
<Upload uploadAction={...} tipText={langs.picsAndVideo} maxCount={10} list={images} onChange={(val) => setImages(val)} />
<Upload.Preview list={images} />
// tip: 使用`Upload.Wrapper`的方式不会渲染默认操作UI,可进行自定义显示
<Upload.Wrapper uploadAction={...} tipText={langs.picsAndVideo} maxCount={10} list={images} onChange={(val) => setImages(val)} >
<Text>上传文件</Text>
</Upload.Wrapper>
images.map(image => ...)
</View>
// 文档上传
<Upload mediaType="document" uploadAction={...} tipText="文件" maxCount={10} list={document} onChange={(val) => setDocument(val)} />
</View>
name?: string // 名称
type?: string // 类型
status?: 'loading' | 'done' | 'error' // 资源状态
origin?: FileVO // 远程上传结果
* 本地文件资源路径
uri?: string
* 切分后的文件资源路径
sliceUri?: string
* 文件大小
size?: number
* 文件hash值
hash?: string
* 当次文件偏移
offset?: number
* 当前文件是否需要断点续传
resume?: boolean
* 是否可删除
* @default true
deletable?: boolean
export type UploadAction = ({ data, file }: UploadActionParams) => Promise<FileVO>
interface FileVO {
/** 文件ID */
fileId?: string
/** 文件上传时间戳 */
fileUploadTime?: number
/** 文件地址 */
fileUrl?: string
/** 文件名称 */
filename?: string
此上传组件在文件压缩/断点续传等阶段会产生大量的缓存文件,并且默认不会清除,在 2.2.0
版本,提供了两个 API 来快速感知上传缓存和清除缓存,你也可以通过 UPLOAD_CACHE_DIR
获取缓存目录从而更灵活的实现清除缓存的功能
获取文件上传缓存文件夹的统计信息
清除上传文件夹缓存
⚠️ 清除缓存后,再次上传同一文件的处理效率将会下降
具体使用方式见example