使用 React js 获取文件夹路径答案

【问题标题】：Get Folder path using React js使用 React js 获取文件夹路径
【发布时间】：2022-12-28 19:57:48
【问题描述】：

我想获取文件夹的路径，以便我需要将所选文件夹的路径发布到后端，以便它像这样接收

string path2 = Path.GetDirectoryName(@"C:\Users\Public\Desktop\workspace\");

我试过<input directory="" webkitdirectory="" type="file" />它不显示文件夹的路径它只是显示像foldername/filename.jpg我想要像C:\Users\Public\Desktop\workspace\这样的路径请指导我如何去做。

【问题讨论】：

标签： reactjs directory

【解决方案1】：

你不能在 React 中这样做，如果你仍然想获取文件路径，我建议你这样做电子并使用飞秒在电子内部。

【讨论】：

您的答案可以通过其他支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写出好的答案的信息in the help center。

【解决方案2】：

您不能这样做 - 出于安全考虑，浏览器将不允许这样做。

当使用输入类型=文件对象选择文件时，值属性的值取决于用于显示网页的安全区域的“将文件上传到服务器时包括本地目录路径”安全设置的值包含输入对象。

仅当启用此设置时，才会返回所选文件的完全限定文件名。禁用该设置后，Internet Explorer 8 会将本地驱动器和目录路径替换为字符串 C:akepath，以防止不当信息泄露。

有关这方面的更多信息，请参阅https://webplatform.github.io/docs/html/elements/input/type/file/。

【讨论】：

【解决方案3】：

在 React js 中，我只想知道文件名，所以我只是简单地使用文件目标函数

import React, { useState } from "react";

export default function App() {
const [filename, setFileName] = useState([]);

const handle = (event) => {
const data = [];
for (let i = 0; i < event.target.files.length; i++) {
  data.push(event.target.files[i]);
}

console.log("data :- ", data);
setFileName(data);
};

return (
<div className="App">
  <h1>Hello...</h1>

  <input type="file" onChange={handle} multiple />

  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">File name</th>
      </tr>
    </thead>
    {fileName.map((item, i) => {
      return (
        <React.Fragment key={i}>
          <tbody>
            <tr>
              <th scope="row">{i}</th>
              <td>{item.name}</td>
            </tr>
          </tbody>
        </React.Fragment>
      );
    })}
  </table>
</div>
);
}

【讨论】：