我需要在Reactjs中创建一个组件,让用户从系统中选择一个目录。我试过用input name=“myFile”type=“file”它允许用户选择文件。I want something like this
u0sqgete1#
是否要上载文件?如果你的目标是,你可以简单地用他们已经写好的任何第三方组件来完成它。对于文件,您可以执行以下操作:
<input type="file" onChange={ (event) => this.handleChange(event.target.files) } /> handleChange(selected: FileList) { console.log(selected); }
j9per5c42#
你可以使用一个软件包pathnpm i path这个软件包默认安装在节点项目中,它用于读取文件扩展名,文件基名,我们也可以使用它来查找父目录名(你要求的),还有更多我们可以做的。你也可以在react中安装它来阅读目录名。检查这个方法来读取目录/文件夹名或Check this Site
npm i path
但必须给予文件路径
另外,检查Ant-design bootstrap以轻松访问文件路径Ant-design component Link,您可以在onChange函数中获得路径。
onChange
ar5n3qh53#
我今天也在寻找同样的问题。很遗憾,出于安全原因你不能。有一个名为showDirectoryPicker的方法可以在这种情况下帮助您,但它仍然不能为您提供文件的完整路径。我能找到的最好的是所选目录的名称。
3条答案
按热度按时间u0sqgete1#
是否要上载文件?
如果你的目标是,你可以简单地用他们已经写好的任何第三方组件来完成它。
对于文件,您可以执行以下操作:
j9per5c42#
你可以使用一个软件包path
npm i path
这个软件包默认安装在节点项目中,它用于读取文件扩展名,文件基名,我们也可以使用它来查找父目录名(你要求的),还有更多我们可以做的。你也可以在react中安装它来阅读目录名。检查这个方法来读取目录/文件夹名或Check this Site
但必须给予文件路径
另外,检查Ant-design bootstrap以轻松访问文件路径Ant-design component Link,您可以在
onChange
函数中获得路径。ar5n3qh53#
我今天也在寻找同样的问题。很遗憾,出于安全原因你不能。有一个名为showDirectoryPicker的方法可以在这种情况下帮助您,但它仍然不能为您提供文件的完整路径。我能找到的最好的是所选目录的名称。