Higgz-Uploader

一个基于aws-s3的文档上传工具

类型声明

declare function higgzUploader(file: File, options: HiggzUploaderOptions): Promise<string>
// 返回值是文件的url

HiggzUploaderOptions

| KEYS | 是否必传 | 描述 | 默认值 | 定义 | | --------------------------- | -------- | ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | | onProgress | true | 上传进度同步函数 | | (progress: Pick<Progress, 'loaded' | 'total'>)=>void | | onSuccess | true | 上传成功的回调 | | (response?: object) => void | | onError | true | 上传失败的回调 | | onError: (response?: object) => void 以上三项可以和上传组件的CustomRequest方法配合实现进度和状态的同步 | | bucket | true | s3基本配置 | | | | region | true | s3基本配置 | | | | IdentityPoolId | true | s3基本配置 | | | | chunkSize | false | 分包时的每个包的大小 | 5MB | 切片大小决定上传进度的敏感程度，同步进度的本质是上传一个分片之后同步已上传的文件大小 | | concurrentUploadCount | false | 切片上传时的请求并发数量 | 20 | | | useFileCache | false | 是否使用缓存文件 | true | 如果使用缓存文件，如果已经上传过该文件则会直接返回url（而非重新上传） | | originalURI | false | 文件url原始前缀 | 无 | | | downloadBaseURI | false | 文件url替换前缀 | 无 | 如果同时配置了originalURI和downloadBaseURI，则会将s3的url从 ${originUrl}/${fileHash}.suffix替换为${downloadBaseURI}/${fileHash}.suffix |

使用案例

import { useState } from 'react'
import type { UploadProps } from '@arco-design/web-react'
import { Button, Upload } from '@arco-design/web-react'
import type { ProgressHandlerType } from '@higgz-fe/higgz-uploader'
import { higgzUploader } from '@higgz-fe/higgz-uploader'

import { baseS3Config } from '@/common.ts'

const UploadInstance = () => {
  const [fileList, setFileList] = useState([])

  const handleCustomRequest: UploadProps['customRequest'] = async (options) => {
    const { file, onSuccess, onProgress, onError } = options
    const handleProgress: ProgressHandlerType = ({ loaded, total }) => {
      return onProgress(Math.round(loaded / total * 100))
    }
    const result = await higgzUploader(file, {
      onProgress: handleProgress,
      onSuccess,
      onError,
      ...baseS3Config,
    })
    console.log(result)
  }

  return (
    <div className="custom-upload-progress">
      <Upload
        showUploadList={{
          startIcon: (
            <Button size="mini" type="text">
              开始上传
            </Button>
          ),
          cancelIcon: (
            <Button size="mini" type="text">
              取消上传
            </Button>
          ),
          reuploadIcon: (
            <Button size="mini" type="text">
              点击重试
            </Button>
          ),
        }}
        progressProps={{
          size: 'small',
          type: 'line',
          showText: true,
          width: '100%',
        }}
        multiple
        fileList={fileList}
        onChange={setFileList}
        customRequest={handleCustomRequest}
        onProgress={(file) => {
          setFileList((v) => {
            return v.map((x) => {
              return x.uid === file.uid ? file : x
            })
          })
        }}
      />
    </div>

  )
}

export default UploadInstance