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

Question

我在此处寻找上传文件夹 reactjs.I 那里有 doc 和 docx 文件的文件夹我只想在用户单击浏览时上传文件夹 button.where 我必须不允许用户对于 selecting 单个文件。有人可以给我一个文件夹上传或文件夹 select 的简单示例，其中用户只能 select 文件夹而不是文件。实际上，我正在查看 react-dropzone 库，但不了解如何将其用于文件夹 select 或上传。如果有人可以指导我或给我一个简单的例子，其中显示了文件夹上传的例子，那将是很好的提前 help.Thanks。

Answer 1

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

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

但是您不能禁止用户只上传一个文件。

Answer 2

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

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

使用此用户无法 select 单个文件。

它对我有用:)

Answer 3

基于, you can customize a file upload event via the getFilesFromEvent prop, as described in the 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 中上传文件夹？

How can we simply upload folder in reactjs?

javascript

reactjs

react-dropzone