推荐一款React上传文件组件react-dropzone
2021-02-15
简单的React钩子创建一个兼容html5的文件拖放区。
基础示例:demo
支持手动或拖动批量上传,样式可自定义,兼容性不错。
主要关心接收上传的文件信息,onDrop回调中会返回所有数据acceptedFiles。
const onDrop = useCallback(acceptedFiles => {
console.log('onDrop', acceptedFiles);
// doUpload(acceptedFiles);
}, [])
const {
getRootProps,
getInputProps,
acceptedFiles,
isDragActive,
isDragAccept,
isDragReject
} = useDropzone({ accept: 'image/*', onDrop });