6

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

4

4 回答 4

12

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

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

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

它为我工作:)

于 2019-04-10T14:48:42.057 回答
1

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

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

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

于 2019-04-10T10:11:10.770 回答
0

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

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

 
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>
);

于 2020-12-29T16:00:21.637 回答
0

根据Zaif 的回答，您可以通过 prop 自定义文件上传事件getFilesFromEvent，如 react-dropzone文档中所述。

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

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
}
于 2020-12-29T15:44:48.427 回答