时间戳

首页 > 解决方案 > 相当于react中的directory、mozdirectory和webkitdirectory？

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

问题描述

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

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

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

标签： javascriptreactjsmernecmascript-2016

解决方案

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

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

推荐阅读