推荐一款React上传文件组件react-dropzone

简单的React钩子创建一个兼容html5的文件拖放区。

官网:react-dropzone

基础示例:demo

支持手动或拖动批量上传,样式可自定义,兼容性不错。

主要关心接收上传的文件信息,onDrop回调中会返回所有数据acceptedFiles。

	const onDrop = useCallback(acceptedFiles => {
		console.log('onDrop', acceptedFiles);
		// doUpload(acceptedFiles);
	}, [])

	const {
		getRootProps,
		getInputProps,
		acceptedFiles,
		isDragActive,
		isDragAccept,
		isDragReject
	} = useDropzone({ accept: 'image/*', onDrop });