react-widget-upload

Upload基础组件

安装

npm install --save react-widget-upload

使用

importUploadfrom'react-widget-upload';import'react-widget-upload/style';<UploadonChange={files=>{...}}>选择文件</Upload>;

Interfaces

exportinterfaceRWFileextendsFile{webkitRelativePath?: string;}exportinterfaceUploadPropsextendsOmit<React.HTMLAttributes<any>,"onChange">{/** 组件样式前缀 */prefixCls?: string;/** 组件标签 */tagName?: string;/** input name属性 */name?: string;/** input accept */accept?: string;/** input multiple */multiple?: boolean;/** input key，用于部分情况下重新创建input */inputKey?: React.Key;/** 是否支持文件夹上传 */directory?: boolean;/** 禁用 */disabled?: boolean;/** 禁用，相比disabled只是默认样式不同 */readOnly?: boolean;/** 点击时打开系统文件选择窗口 */openFileDialogOnClick?: boolean;/** 是否支持拖拽上传 */droppable?: boolean;/** 设置选择onChange接收的最大文件数，默认为无限 */maxFiles?: number;/** 用户选择或取消选择后的回调 */onChange?: (files: RWFile[])=>void;}

defaultProps

{prefixCls: "rw-upload",tagName: "div",tabIndex: 0,maxFiles: Number.MAX_VALUE,droppable: true,openFileDialogOnClick: true,}

基础样式

.rw-upload {
cursor: pointer;
}

FAQ

react-widget-upload只负责将用户选择后的文件回传给使用者，并不进行实际的文件上传，使用者需要自行构建FormData，示例：

functionhandleChange(files){if(!files.length)return;constfile=files[0];constformData=newFormData();formData.append('file',file,file.name);post(url,formData);}