react-widget-upload

安装

npm install --save react-widget-upload

使用

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

Interfaces

export interface RWFile extends File {
 webkitRelativePath?: string;
}
export interface UploadProps extends Omit<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

function handleChange(files){
 if(!files.length) return;
 const file = files[0];
 const formData = new FormData();
 formData.append('file', file, file.name);
 post(url, formData);
}