相当于react中的directory、mozdirectory和webkitdirectory？

Question

我想使用 React 将目录上传到我的服务器，我尝试使用目录、mozdirectory 和 webKitDirectory 属性，但它们不起作用，我尝试运行下面的代码，但不幸的是，它没用。

function UploadDirectory() {
  function dirUploadAttr(input) {
    input.setAttribute("webkit-directory", "");
    input.setAttribute("moz-directory", "");
  }
  return (
      <input type="file" ref={dirUploadAttr} />
  )
}

如何在 React 中获取输入标签中的目录？有什么简单有效的方法吗？

Answer 1

老实说，我和我工作过的公司的一名团队成员已经研究这个问题几个星期了。问题是我们正在为其开发应用程序的用户想要一种从目录中剥离文件并上传的方法，而无需双击目录本身来获取文件（例如，单击上传中包含该文件的文件夹菜单并选择上传以上传整个文件夹）。好吧，在挖掘和挖掘之后，我们联系了多个团队以找到解决方案，他们告诉我们：“React 不支持 webkitdirectory（或任何类似的东西），这是由于 Windows 限制。”我相信它可以在 .NET 时代完成，但 React 的特定 html 标签不支持 webkitdirectory 作为属性。我们改为从节点模块 react-dropzone-uploader:

合并了一个 dropzone

import Dropzone from "react-dropzone-uploader";
import { getDroppedOrSelectedFiles } from './Html5FileSelector'

  const getFilesFromEvent = (e:any) => {
    return new Promise<any>(resolve => {
      getDroppedOrSelectedFiles(e).then(chosenFiles => {
        resolve(chosenFiles.map((f:any) => f.fileObject))
      })
    })
  };

  const handleSubmit = (files:any) => { this.fileChange(files); }

  <Dropzone accept=".txt" getFilesFromEvent={getFilesFromEvent} onSubmit= 
  {handleSubmit} />

请注意，您必须从 Html5FileSelector 中实现一个函数，更多信息可以从演示 dropzone 上传器的实例中获取，这也是节点模块官方文档的 link： https://react-dropzone-uploader.js.org/docs/examples#!/Custom%20Input,%20Directory%20Drag%20and%20Drop

相当于react中的directory、mozdirectory和webkitdirectory？

Equivalent to directory, mozdirectory and webkitdirectory in react?

javascript

reactjs

mern

ecmascript-2016