Install

npm install rapid-uploader

Examples

import React, { useRef } from 'react'
import ReactDOM from 'react-dom/client'
import { MultipartUpload, SingleUpload } from 'rapid-uploader'
const App = () => {
    const ref = useRef<MultipartUpload>()
    const singleRef = useRef<any>()
    const change = (e: any) => {
        const file = e.target.files[0]
        ref.current = new MultipartUpload({
            checkUploadOption: {
                params: {
                    // tag 和 key 根据不同的业务可联系后端获取，type 直传默认为 1
                    tag: 'test',
                    key: 'test',
                    type: 1,
                },
                headers: {
                    authorization:
                        'Bearer 子平台鉴权的token',
                },
                getUploadSignatureUrl:'' // 后台获取 oss 一系列参数的 url
            },
            options: {
                // 设置并发上传的分片数量。
                parallel: 2,
                // 设置分片大小。默认值为10 MB，最小值为100 KB。
                partSize: 1024 * 1024 * 8,
            },
            file,
            progress:(...args)=>{
                // 用于监听上传进度
                console.log(args);
                
            },
            data:{
                // 此参数是在上传成功后回调后端服务时传给后端服务
                // 在后端服务需要此参数时可选择传入
            }
        })
    }
    const upload = async () => {
        try {
            const result = await ref.current?.upload()
            console.log(result)
        } catch (error) {
            console.log(error)
        }
    }
    const pause = () => {
        ref.current?.pause()
    }
    const resume = async () => {
        const result = await ref.current?.resume()

        console.log(result)
    }
    const destroy = () => {
        ref.current?.cancel()
    }
    const singleChange = (e: any) => {
        const file = e.target.files[0]
        singleRef.current = new SingleUpload({
            file,
            checkUploadOption: {
                params: {
                    // tag 和 key 根据不同的业务可联系后端获取，type 直传默认为 0
                    tag: 'test',
                    key: 'test',
                    type: 0,
                },
                headers: {
                    authorization:
                        'Bearer 子平台鉴权的token',
                },
                getUploadSignatureUrl:'' // 后台获取 oss 一系列参数的 url
            },
            data:{
                // 此参数是在上传成功后回调后端服务时传给后端服务
                // 在后端服务需要此参数时可选择传入
            }
        })
    }
    const singleUpload = async () => {
        try {
            const result = await singleRef.current.upload()
            console.log(result)
        } catch (error) {
            console.log(error)
        }
    }
    return (
        <div>
            <div>
                <span> 分片</span>
                <input id="file" type="file" onChange={change} />
                <button id="submit" onClick={upload}>
                    上传
                </button>
                <button id="pause" onClick={pause}>
                    暂停
                </button>
                <button id="resume" onClick={resume}>
                    恢复上传
                </button>
                <button id="resume" onClick={destroy}>
                    销毁
                </button>
            </div>
            <div>
                <span>直接</span>
                <input id="file" type="file" onChange={singleChange} />
                <button id="submit" onClick={singleUpload}>
                    上传
                </button>
            </div>
        </div>
    )
}
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)