Question

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

Answer 1

您可以通过在输入中添加以下属性“ webkitdirectory mozdirectory目录”来允许文件夹上传：

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

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

Answer 2

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

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

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

对我有用：）

Answer 3

基于 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
}

Answer 4

如果您正在寻找使用 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>
);

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

4 个答案: