【问题标题】:How can we simply upload folder in reactjs?我们如何在 reactjs 中简单地上传文件夹?
【发布时间】:2019-04-10 08:53:43
【问题描述】:

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

【问题讨论】:

    标签: javascript reactjs react-dropzone


    【解决方案1】:

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

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

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

    它对我有用:)

    【讨论】:

    • 嗨我试过这个它在 JS 中工作但是当我尝试在 TS 中处理它时它给出了这个错误“属性'webkitdirectory'不存在类型'DetailedHTMLProps,HTMLInputElement >'" 知道怎么解决吗?
    【解决方案2】:

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

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

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

    【讨论】:

    • 感谢回复,在 react-dropzone 库中用户只能选择文件夹吗?因为你给出的答案是纯 javascript 对!
    • 甚至不是 javascript 只是 html,无论如何,在查看 react-dropzone 之后似乎没有选项可以限制为仅文件夹。但是你可以在上传文件之前检查它是否是目录,然后上传是否是目录,如果不是则显示错误消息。
    • @NiI 你能在 (codesandbox.io) 中给我举个例子吗?
    • 不是真的,但如果你愿意,我可以帮助你。无论如何,在 react-dropzone 示例中有一个名为“onDrop”的方法,如果你幸运的话,也许“acceptedFiles”变量中有一些信息不能用于确定它是否是一个文件夹,如果你不走运,它只是文件夹中包含的文件列表,在这种情况下,您必须构建/分叉您的专用组件。
    • @NiI 是的,有“acceptedFiles”道具,它只验证接受的文件,我以前用这个库上传单个文件。但现在我想上传文件夹而不是单个文件,还有另一个道具称为“多个”,它允许我们选择多个文件但不是文件夹我尝试过但不适用于文件夹上传:(
    【解决方案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>
    );

    【讨论】:

      【解决方案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
      }
      

      【讨论】:

      • 能否提供一个具体的例子说明如何解决文件夹上传问题。
      • @igorpcholkin 我用一个例子更新了我的答案。希望对你有用
      猜你喜欢
      • 2022-11-12
      • 2020-01-14
      • 2012-09-10
      • 1970-01-01
      • 2017-05-27
      • 2021-12-25
      • 2021-03-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多