如何在单文件模式下使用dropzone？

Question

我正在使用带有 dropzone 的 react-hooks。

所以，我的代码看起来像这样：

const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles);
};

const { getRootProps, getInputProps } = useDropzone({ onDrop });
return (
  <div {...getRootProps()} className="dropzone-container">
    <input {...getInputProps()} multiple={false} />
    // My component here
  </div>
)

现在，当我点击拖放区时，我只能 select 1 个文件。太棒了。

但是当我将多个文件拖放到拖放区时，所有文件都被接受了。我的意思是在 onDrop 方法中，我在 acceptedFiles 参数中获取所有文件。

有人能指出为什么会这样吗？我做错了什么吗？

Answer 1

您可以传递 multiple: false to useDropzone 并且它会在放置时忽略多个文件并且只会选择第一个文件

const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles);
};

const { getRootProps, getInputProps } = useDropzone({ onDrop, multiple: false });
return (
  <div {...getRootProps()} className="dropzone-container">
    <input {...getInputProps()}/>
    // My component here
  </div>
)

Answer 2

您可以使用multiple={false}

<Dropzone onDrop={acceptedFiles => handleAcceptedFiles(acceptedFiles)} multiple={false}>
   {({ getRootProps, getInputProps }) => (
    <div className="dropzone">
      <div className="dz-message needsclick mt-2" {...getRootProps()}>
         <input {...getInputProps()} />
         <div className="mb-3">
         <i className="display-4 text-muted ri-upload-cloud-2-line"></i>
      </div>
      <h4>Drop Feature image or click to upload.</h4>
    </div>
   </div>
   )}
 </Dropzone>

如何在单文件模式下使用dropzone？

How to use dropzone in a single file mode?

reactjs

react-dropzone