我们如何在 reactjs 中简单地上传文件夹？

Question

我在这里寻找 reactjs 中的上传文件夹。我在那个 doc 中有文件夹，并且 docx 文件在那里我只想在用户单击浏览按钮时上传文件夹。我必须不允许用户选择单个文件。有人可以给我简单的文件夹上传或文件夹选择示例，其中用户只能选择文件夹而不是文件。实际上，我正在查看 react-dropzone 库，但不了解如何将其用于文件夹选择或上传。如果有人可以指导我或给我一个简单的例子，它会显示文件夹上传示例，这将是很大的帮助。在此先感谢。

Answer 1

您可以通过将这些属性空的“webkitdirectory 目录”添加到您的 react-dropzone 输入中来允许文件夹上传。

像这样。 <input {...getInputProps()} directory="" webkitdirectory="" type="file" />

使用此用户无法选择单个文件。

它对我有用:)

Answer 2

您可以通过将这些属性“webkitdirectory mozdirectory directory”添加到您的输入来允许文件夹上传：

 <input type="file" webkitdirectory mozdirectory directory />

但您不能禁用用户仅上传一个文件的功能。

Answer 3

如果您正在寻找使用 d&d 上传文件夹，我推荐 react-uploady：

它的drop-zone 支持开箱即用的文件和文件夹拖放上传。 它甚至可以用于递归上传子文件夹：

 
import Uploady from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";

const MyApp = () => (
    <Uploady destination={{ url: "my-server.com/upload" }}>
        <UploadDropZone 
          onDragOverClassName="drag-over"
          htmlDirContentParams={{ recursive: true }}
        >
            <span>Drag&Drop File(s) or Folder(s) Here</span>            
        </UploadDropZone>
    </Uploady>
);

Answer 4

基于Zaif's answer，您可以通过getFilesFromEvent 属性自定义文件上传事件，如react-dropzone documentation 中所述。

更新： 这是一个取自官方文档的简化示例。

import React from 'react'
import { useDropzone } from 'react-dropzone'

function Plugin(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
    getFilesFromEvent: event => myCustomFileGetter(event)
  })
  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )
}

export default Plugin

async function myCustomFileGetter(event) {
  const files = []
  // Retrieves the files loaded by the drag event or the select event
  const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files

  for (var i = 0; i < fileList.length; i++) {
    const file = fileList.item(i)
    files.push(file)
  }

  // files returned from this function will be acceptedFiles
  return files
}