使用 reactjs 的文件夹选择器

Question

我需要在 Reactjs 中创建一个组件，让用户从他的系统中选择一个目录。我尝试使用

输入名称=“我的文件”类型=“文件”

它让用户选择文件。

Answer 1

要上传文件吗？

如果您的目标是您可以简单地使用他们已经编写的任何第三方组件来完成。

对于文件你可以这样做：

<input type="file" onChange={ (event) => this.handleChange(event.target.files) } />

handleChange(selected: FileList)
    {
        console.log(selected);
    }

Answer 2

你可以为这个path使用一个包

npm i path

这个包默认安装在节点项目中，用于读取文件扩展名、文件基名，我们也可以用它来查找父目录名（你要求的）等等我们可以做的。

您也可以在反应中安装它以读取目录名称检查此方法以读取目录/文件夹名称或检查此站点

但是必须给文件路径

此外，检查 Ant-design bootstrap 以轻松访问文件路径Ant-design 组件链接 您可以在

onChange

函数中获取路径。

Answer 3

我今天也在找同样的问题。遗憾的是，出于安全原因，您不能这样做。在这种情况下，有一个名为 showDirectoryPicker 的方法可以帮助您，但它仍然无法为您提供文件的完整路径。我能找到的最好的是所选目录的名称。