相当于react中的directory，mozdirectory和directory directory？

Question

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

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

如何在react中获取input标签中的目录？有效且简单的方法是什么？

Answer 1

老实说，我和我工作过的公司的一名团队成员已经研究了这个问题好几个星期了。问题是，我们为其制作应用程序的用户想要一种从目录中剥离文件并将其上传的方法，而不必双击目录本身来获取文件(例如，在upload菜单中单击包含该文件的文件夹，然后选择upload以上传整个文件夹)。经过不断的挖掘，我们与多个团队取得了联系，以便找到解决方案，他们告诉我们：“在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上载程序的实时示例中获得，这也是到节点模块的官方文档的链接：https://react-dropzone-uploader.js.org/docs/examples#!/Custom%20Input,%20Directory%20Drag%20and%20Drop