Uploader 上传文件

通过点击或者拖拽上传文件的组件，对上传图片支持预览。

获取组件 

import { Uploader } from 'rsuite';

// or
import Uploader from 'rsuite/Uploader';

演示

默认

图片

图片加文本

头像

拖拽上传

初始文件列表

自定义文件描述

禁用与只读

手动上传

受控的

文件检查校验

Props

<Uploader>

继承 Button 组件的 Props。

属性名称 类型 (默认值) 描述
accept string 接受上传的文件类型，详见：HTML attribute: accept
action * string 文件上传地址, 必选
autoUpload boolean (true) 选择文件后自动上传
classPrefix string ('uploader') 组件 CSS 类的前缀
data object 上传所带的参数
defaultFileList FileType[] 已经上传的文件列表
disableMultipart boolean 如果为 true 则禁用使用 FormData 进行文件上传，而是传输文件流。 某些 API（例如 Amazon S3）可能希望文件流传输而不是通过表单发送
disabled boolean 禁用
disabledFileItem boolean 禁用文件列表
draggable boolean 允许拖拽上传
fileList FileType[] 已经上传的文件列表 （受控）
fileListVisible boolean(true) 显示文件列表
headers object 设置上传的请求头部
listType menu: 'text' , 'picture-text' , 'picture' ('text') 上传列表的样式
locale UploaderLocaleType 本地化的文本
maxPreviewFileSize number (5242880) 设置预览文件最大限制
method string ('POST') 上传请求的 http method
multiple boolean 允许一次选择多个文件上传
name string ('file') 上传对应文件的参数名
onChange (fileList: FileType[]) => void 上传队列发生改变的回调函数
onError (reason: Object, file: FileType) => void 上传出现错误的回调函数
onPreview (file: FileType, event) => void 在文件列表中，点击已上传的文件的回调函数
onProgress (percent: number, file: FileType) => void 上传进度发生变化的回调函数
onRemove (file: FileType) => void 在文件列表中，点击删除一个文件的回调函数
onReupload (file: FileType) => void 在文件列表中，对上传失败的文件，点击重新上传的回调函数
onSuccess (response: Object, file: FileType) => void 上传成功后的回调函数
onUpload (file: FileType) => void 上传文件开始的回调函数
removable boolean (true) 允许删除上传列表中的文件
renderFileInfo (file: FileType, fileElement: ReactNode) => ReactNode 自定义渲染文件信息
renderThumbnail (file: FileType, thumbnail: ReactNode) => ReactNode 自定义渲染缩略图
shouldQueueUpdate (fileList: FileType[], newFile: FileType[] | FileType) => boolean | Promise<boolean> 允许更新队列。在选择文件后，更新上传文件队列前的校验函数，返回 false 则不更新
shouldUpload (file: FileType) => boolean | Promise<boolean> 允许上传文件。在文件上传前的的校验函数，返回 false 则不上传
timeout number 设置上传超时
toggleAs ElementType (Button) 为组件自定义元素类型
withCredentials boolean 上传请求时是否携带 cookie

ts:FileType 

interface FileType {
  /** File Name */
  name?: string;
  /** File unique identifier */
  fileKey?: number | string;

  /** File upload status */
  status?: 'inited' | 'uploading' | 'error' | 'finished';

  /** File upload status */
  progress?: number;

  /** The url of the file can be previewed. */
  url?: string;
}
Vercel banner