添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

* 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获取缓存目录从而更灵活的实现清除缓存的功能

function cacheDirStat(): Promise<CacheDirStat>

获取文件上传缓存文件夹的统计信息

function clearCache(): Promise<ClearCacheResult>

清除上传文件夹缓存 ⚠️ 清除缓存后,再次上传同一文件的处理效率将会下降

具体使用方式见example