Nacho Printing Machine

    @fruits-chain/react-native-upload
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.10 • Public • Published

    @fruits-chain/react-native-upload

    一个图片/视频上传的 React-Native 组件

    安装

    1. 安装@fruits-chain/react-native-upload
    $ yarn add @fruits-chain/react-native-upload
    1. iOS
    cd ios
    pod install
    1. 根据react-native-image-crop-picker进行相关设置

    使用

    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([])
      return (
        <View>
          <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>
          <View>
            {
              images.map(image => ...)
            }
          </View>
        </View>
      )
    }

    使用效果如下

    API

    表示可选参数

    参数 类型 说明 默认值 版本
    list? IUploadSource[] 当前上传的文件列表 - -
    defaultList? IUploadSource[] 默认上传的文件列表 [] -
    onChange? (list: IUploadSource[]) => void 上传文件变更/状态变更时调用此方法 - -
    onUploadError? (msg?: any) => void 上传出错时的回调 - -
    maxCount? number 最大可上传数量 10 -
    tipText? string 上传提示文本 - -
    mediaType? string 支持photovideoany any -
    multiple? boolean 是否支持多选上传 true -
    uploadAction? UploadAction 上传接口封装的函数 - -
    cropping? boolean 是否进行裁剪 false -
    width? number cropping 模式下选取图片的宽度 300 -
    height? number cropping 模式下选取图片的高度 300 -
    allowResume? boolean or number 是否支持续传(传入number时表示只有压缩后大于number字节的文件会开启续传 false 1.2.0
    progressAction? (fileHash: string) => Promise<{fileUrl: string; size: number}> 获取上传当前图片上传进度 - 1.2.0
    compress? boolean 是否开启压缩 true 1.2.0
    showUi? boolean 是否显示 UI true 1.3.0
    interface UploadItem {
      key: string // 当前资源的唯一标识
      path?: string // 本地资源路径
      name?: string // 名称
      type?: string // 类型
      status?: 'loading' | 'done' | 'error' // 资源状态
      origin?: FileVO // 远程上传结果
      /**
       * 本地文件资源路径
       */
      uri?: string
      /**
       * 切分后的文件资源路径
       */
      sliceUri?: string
      /**
       * 文件大小
       */
      size?: number
      /**
       * 文件hash值
       */
      hash?: string
      /**
       * 当次文件偏移
       */
      offset?: number
      /**
       * 当前文件是否需要断点续传
       */
      resume?: boolean
    }
    
    export type UploadAction = ({ data, file }: UploadActionParams) => Promise<FileVO>
    
    interface FileVO {
      /** 文件ID */
      fileId?: string
    
      /** 文件上传时间戳 */
      fileUploadTime?: number
    
      /** 文件地址 */
      fileUrl?: string
    
      /** 文件名称 */
      filename?: string
    }

    Install

    npm i @fruits-chain/react-native-upload

    DownloadsWeekly Downloads

    40

    Version

    1.3.10

    License

    MIT

    Unpacked Size

    97.8 kB

    Total Files

    45

    Last publish

    Collaborators

    • changhuali
    • never-w
    • limoer
    • winljm001
    • onlyling