upload

后台上传公共组件, 相比@fruits-chain/react-native-upload组件, 内部增加了后台上传功能, 用户在上传图片时, 不需要等待上传完成即可退出操作界面, 下次进入该页面时, 本地数据(上传中和上传完成的图片)会自动同步到组件内部

使用

1yarn add @fruits-chain/upload

1import React, { useEffect } from 'react'
2import { useBackUploadManager, init } from '@fruits-chain/upload'
3
4const App = () => {
5  // 获取run方法
6  const { run } = useBackUploadManager(state => ({
7    run: state.run,
8  }))
9
10  // 注意: 需要用户决定init和run方法的调用时机, 下面仅作为示例
11  useEffect(() => {
12    // 初始化上传API, useBackUploadManager内部会执行此回调函数上传文件
13    init(async file => {
14      return await yourUploadAPI(file)
15    })
16    // 继续执行未完成的任务
17    run()
18  }, [run])
19
20  return <YourAppContent />
21}

请确保项目安装了上述包中peerDependencies列出的所有三方包，并仔细检查版本。

API

Upload

上传组件, 支持@fruits-chain/react-native-upload上传组件的所有属性配置, 但是目前仅支持作为受控组件使用

使用

1import React from 'react'
2import Upload from '@fruits-chain/upload'
3
4const Demo = () => {
5  return <Upload groupUuid={'所属分组唯一id'} uuid={'当前上传组件的唯一id'} />
6}

为什么会有组的概念, 主要是方便内部做资源管理, 比如按组清除缓存等

uuid 的作用, 组件内部在同步缓存的数据到组件状态时, 需要通过groupUuid和uuid对资源进行匹配

init

初始化后台上传, 其参数为执行上传 API 的回调函数

使用

1import { init } from '@fruits-chain/upload'
2
3init(async file => {
4  return await yourUploadAPI(file)
5})

useBackUploadManager

一个zustand store, 内部负责整个后台上传的调度, 也暴露了诸如run、setFinishedTask、clear等方法供外部使用

由于useBackUploadManager是一个React hook, 所以他只能在组件内部使用

run

开始处理未完成的任务

使用

1const { run } = useBackUploadManager(state => ({
2  run: state.run,
3}))
4
5run()

setFinishedTask

清理已完成的任务

使用

1const { setFinishedTask } = useBackUploadManager(state => ({
2  setFinishedTask: state.setFinishedTask,
3}))
4
5// 清除某个组已完成的任务
6setFinishedTask(groupUuid)
7// 清除某个组下某个上传组件已完成的任务
8setFinishedTask(groupUuid, uploadUuid)

clear

清理所有任务

使用

1const { clear } = useBackUploadManager(state => ({
2  clear: state.clear,
3}))
4
5clear()