如何解决在React中使用react dnd库上传文件功能
我想在React中使用React dnd创建一个文件上传功能,用户可以通过将文件放在div中来上传文件
解决方法
您好,我建议采用此解决方案-
<div
className="file-select"
onDragOver={dragOver}
onDragEnter={dragEnter}
onDragLeave={dragLeave}
onDrop={fileDrop}
onClick={fileInputClicked}
>
<h4>Select File</h4>
<input
ref={fileInputRef}
className="file-input"
type="file"
multiple
onChange={filesSelected}
/>
</div>
还建议使用ref:
const fileInputRef = useRef();
这只是骨架-您需要实现这些方法- 考虑验证-支持哪些文件等。
此外,您可以实施文件预览,删除等操作-因此,在这种情况下,解决方案的设计或至少是重要的
例如,我使用此功能进行多项选择:
const [selectedFiles,setSelectedFiles] = useState([]);
const [validFiles,setValidFiles] = useState([]);
const [unsupportedFiles,setUnsupportedFiles] = useState([]);
const filesSelected = () => {
if (fileInputRef.current.files.length) {
handleFiles(fileInputRef.current.files);
}
};
const handleFiles = (files) => {
for (let i = 0; i < files.length; i++) {
if (validateFile(files[i])) {
setSelectedFiles((prevArray) => [...prevArray,files[i]]);
} else {
files[i].invalid = true;
setSelectedFiles((prevArray) => [...prevArray,files[i]]);
setErrorMessage('File type not permitted');
setUnsupportedFiles((prevArray) => [...prevArray,files[i]]);
}
}
handleFileData(files);
};
,
您可以为此使用react dropzone软件包。
npm install --save react-dropzone
或:
yarn add react-dropzone
使用挂钩的示例代码段
import React,{useCallback} from 'react'
import {useDropzone} from 'react-dropzone'
function MyDropzone() {
const onDrop = useCallback(acceptedFiles => {
// Do something with the files
},[])
const {getRootProps,getInputProps,isDragActive} = useDropzone({onDrop})
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here,or click to select files</p>
}
</div>
)
}
使用包装器组件的示例代码段
import React from 'react'
import Dropzone from 'react-dropzone'
<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
{({getRootProps,getInputProps}) => (
<section>
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here,or click to select files</p>
</div>
</section>
)}
</Dropzone>
使用onDrop的回调,您可以获取包含文件的acceptedFiles数组。您还可以限制大小,允许多个或仅一个和一种类型的文件来接受。
下面的示例代码段允许多张图片提供10MB的空间,并且仅允许扩展png,jpg,jpeg。
<Dropzone
multiple={true}
minSize={0}
maxSize={10485760}
accept="image/png,image/jpg,image/jpeg"
onDrop={acceptedFiles => console.log(acceptedFiles)}>
{({getRootProps,getInputProps}) => (
<section>
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here,or click to select files</p>
</div>
</section>
)}
</Dropzone>
,
签出react-uploady-upload-drop-zone
您可以从很少的代码开始,像这样:
import Uploady from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";
const App = () => (
<Uploady destination={{url: "https://my-server.com/upload"}}>
<UploadDropZone onDragOverClassName="drag-over">
<span>Drag&Drop File(s) Here</span>
</UploadDropZone>
</Uploady>);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。