Skip to main content

WebUploader

WebUploader 分片上传组件

  • 支持多个文件上传；
  • 支持文件分片上传；
  • 支持文件图片和文件预览功能，及查看上传进度；
  • 支持文件大小、文件数量和文件类型限制；
  • 支持与 createBaseForm 共同使用。

引入​

import {components} from 'baidu-acu-react-common';

const {WebUploader} = components;

基本用法​

function App() {
    // 取消上传
    function handleCancelUpload() {
    }

    // 所有文件上传完成
    function handleUploadFinished(totalResult) {
    }

    function handleFilesChange(files) {
    }

    return (
        <WebUploader
            label="选择文件"
            accept="png,jpg"
            beforeSendFileUrl="/api/file/upload/init"
            url="/api/file/upload/upload"
            afterSendFileUrl="/api/file/upload/complete"
            multiple
            hideStartBtn
            autoStart
            maxFileSize={5 * 1024 * 1024 * 1024}
            maxFileCount={300}
            fileNamePattern={/^[\u4e00-\u9fa5_a-zA-Z0-9.-]+$/}
            onUploadFinished={handleUploadFinished}
            onCancelUpload={handleCancelUpload}
            onChange={handleFilesChange}
        />
    );
}

API​

参数说明类型默认值
label按钮文案 选填string'选择文件'
url上传接口地址 必填string无
beforeSendFileUrl上传前的接口，主要用来分片上传 选填string无
afterSendFileUrl上传之后的接口，主要用来分片上传 选填string无
disabled是否禁用boolfalse
autoStart是否自动发起上传boolfalse
hideStartBtn是否隐藏发起上传按钮boolfalse
multiple是否多文件上传boolfalse
maxFileCount文件上传数量限制number-1 不限制
maxFileSize单个文件上传大小限制number-1 不限制
accept支持上传文件的后缀string''
fileNamePattern文件名要求正则 选填string''
payload其他上传输入参数 选填object{}
uploaderOptionswebuploader底层其他配置项 选填object{}
onChange文件上传状态修改时的事件function
onUploadCompleted上传完成后的事件function
onCancelUpload取消上传后的事件function

参考文档​

https://react-app-common.now.baidu-int.com/#/%E4%B8%9A%E5%8A%A1%E7%BB%84%E4%BB%B6/WebUploader