使用reactjs的文件夹选择器

deikduxw  于 2023-05-17  发布在  React
关注(0)|答案(3)|浏览(326)

我需要在Reactjs中创建一个组件,让用户从系统中选择一个目录。我试过用
input name=“myFile”type=“file”
它允许用户选择文件。I want something like this

u0sqgete

u0sqgete1#

是否要上载文件?
如果你的目标是,你可以简单地用他们已经写好的任何第三方组件来完成它。
对于文件,您可以执行以下操作:

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

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

j9per5c42#

你可以使用一个软件包pathnpm i path这个软件包默认安装在节点项目中,它用于读取文件扩展名,文件基名,我们也可以使用它来查找父目录名(你要求的),还有更多我们可以做的。
你也可以在react中安装它来阅读目录名。检查这个方法来读取目录/文件夹名或Check this Site

但必须给予文件路径

另外,检查Ant-design bootstrap以轻松访问文件路径Ant-design component Link,您可以在onChange函数中获得路径。

ar5n3qh5

ar5n3qh53#

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

相关问题