使用React js获取文件夹路径

Question

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

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

我尝试过

<input directory="" webkitdirectory=""  type="file" />

它不显示文件夹的路径，它只是显示像

foldername/filename.jpg

我想要像

C:\Users\Public\Desktop\workspace\

这样的路径，请指导我如何做到这一点。

Answer 1

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

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

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

请参阅 https://webplatform.github.io/docs/html/elements/input/type/file/ 了解更多信息。

Answer 2

你不能在React中这样做，如果你仍然想获取文件路径，我建议你做Electron并在Electron中使用fs。

Answer 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>
);
}