@tinyuploader/react

Quick Start

安装

npm i @tinyuploader/react -S

使用

import { useRef } from 'react'
import Uploader from '@tinyuploader/react'
import '@tinyuploader/react/dist/style.css'

function App() {
  const upladerRef = useRef(null)

  const checkFileRequest = async ({ hash, name }) => {
    const response = await fetch('http://localhost:3000/checkFile', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        status: 'part',
        hash,
        name
      })
    })
    const json = await response.json()
    return json
  }

  const mergeRequest = async ({ hash, name }) => {
    const response = await fetch('http://localhost:3000/merge', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        hash,
        name
      })
    })
    const json = await response.json()
    if (json.statusCode === 500) {
      throw new Error('服务器错误')
    }
    return json
  }

  const requestSucceed = (xhr) => {
    return xhr.response.data === true
  }

  return (
    <>
      <button onClick={() => upladerRef.current.remove()}>删除所有</button>
      <button onClick={() => upladerRef.current.submit()}>开始上传</button>
      <Uploader
        action="http://localhost:3000/upload"
        accept=".jpg, .png, .json, .dmg"
        ref={upladerRef}
        fileList={[
          { name: 'baidu', path: 'http://baidu.com' },
          { name: 'google', path: 'http://baidu.com' }
        ]}
        limit={4}
        maxRetries={1}
        retryInterval={500}
        maxConcurrency={3}
        data={{ user: 'moyuderen' }}
        headers={{ token: 'xxxxxx' }}
        requestSucceed={requestSucceed}
        checkFileRequest={checkFileRequest}
        mergeRequest={mergeRequest}
      />
    </>
  )
}

export default App

Props 属性

基础属性

参考 @tinyuploader/sdk 的参数配置

事件属性

参考 @tinyuploader/sdk 的回调

onExceed

参考 Exceed

onFilesAdded

参考 FilesAdded

onFileRemove

参考 FileRemove

onFileProgress

参考 FileProgress

onFileFail

参考 FileFail

onFileUploadFail

参考 FileUploadFail

onFileUploadSuccess

参考 FileUploadSuccess

onFileSuccess

参考 FileSuccess

onAllFileSuccess

参考 AllFileSuccess

onFail

文件上传失败的回调,包括 chunk 失败（文件状态为uploadFail），或者 chunk 上传成功但是 merge 失败（文件状态为fail）。即onFileUploadFail和FileFail都会触发onFail

onFail(file, fileList)

onSuccess

文件上传成功的回调，包括上传 chunk 完成，mergr 合并完成，与onFileSuccess是一样的

onSuccess(file, fileList)

onChange

文件列表发生改变时调用

onChange(fileList, [file])

onClick

点击文件时事件

onClick(file)

Methods

clear

删除所有文件，并且取消所有上传中的请求

<button onClick={() => upladerRef.current.remove()}>Clear</button>

submit

手动触发上传，一般在autoUpload为false时使用

<button onClick={() => upladerRef.current.submit()}>开始上传</button>

Demo 展示

• 线上展示

• 具体代码

mock 接口

阅读文档

更新日志