Javascript 如何在react`<；中获取图像的绝对路径；输入="；文件"/>；`并将其储存在当地州？

我有一个简单的购物应用程序，我与反应，反应路由器和引导。我在某个页面上有一个表单，可以在其中向数据库添加新产品

在那里，我可以提供名称、描述、类别，并上传产品图片

问题是，当我通过

上传图像时，我想在按下

打开

并将其存储在本地状态时以某种方式获取图像的绝对路径

直到现在我的代码是这样的

function Form() {
  const [imageUrl, setImageUrl] = useState("");

  // ... a bunch of code here

  return (
    <form style={styles.form}>

      // ... a bunch of code here

      <div className="form-group">
        <label htmlFor="image" className="form-label" style={styles.label}>
          Picture
        </label>
        <input className="form-control" type="file" id="image" required />
      </div>

      // ... a bunch of code here

    </form>
  )
}

函数形式（）{
const[imageUrl，setImageUrl]=useState（“”）；
//…这里有一堆代码
返回(
//…这里有一堆代码
图画
//…这里有一堆代码
)
}

我已经试过了，但这是针对Jquery的

---

我是新手，所以请友好一点，并提前感谢：）

由于安全原因，您无法获取完整路径。您可以尝试使用

fs js

模块处理文件

简短回答；你不能

出于安全原因，

input

file元素将故意隐藏完整路径：

该字符串以C:\fakepath作为前缀，以防止恶意软件猜测用户的文件结构。（）

一般来说，当你使用文件输入时，它是用来上传文件的；你根本不需要这条路

编辑，例如上传到谷歌硬盘

注意：这需要对您进行身份验证

假设您的html如下所示：

<form id="load-image-form">
    <input type="file" id="chosen-image" accept=".jpg,.png">
    <button type="submit">Upload</button>
</form>

基本上，表单提交后，检查是否选择了一个文件，如果选择了，则使用

FileReader

将其加载，然后

POST

将其发送到Google Drive

当我在本地测试时，我得到一个授权

Login Required

错误，因此您需要为此登录

---

要将其上传到您的服务器（例如节点），请使用我在评论中发布的链接：

您是否阅读了链接问题中的答案？首先，有一个没有任何jQuery的答案（对于Firefox）。其次，它明确指出这是不可能的。正如许多其他人已经说过的那样，你无法获得路径，你能得到的最好的是一个文件句柄引用，如果你使用新的本机文件系统访问api（大部分仅在chrome atm中可用），你可以存储和重用它。谢谢，我只是想要完整的路径，这样我就可以上传谷歌驱动API的图像。还有其他方法吗？快速查看，您有步骤“将文件的数据添加到请求正文。”，因此看起来根本不需要路径。从

返回的应该是文件数据实际上，我需要文件路径，这样我就可以对服务器进行API调用，并将其传递到请求体中。然后服务器可以使用节点的

fs

核心模块的绝对路径读取文件内容，并创建一个流并将其上传到google drive。是否有办法在客户端获取

文件数据

？请提供帮助。在您的示例中，使用FileReader上载文件的方式不需要使用RAM，您可以将FileReader全部丢弃，只需将文件用作body

{method:'POST'，body:file}

const fileInput = document.getElementById('chosen-image')
document.getElementById('load-image-form').addEventListener('submit', e => {
    e.preventDefault();

    // check if there's any actual files chosen
    if (fileInput.files.length == 0) {
        console.log(`No files chosen`);
        return;
    }

    // assume only one file - read it, and when it's ready, upload to google drive
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = () => {
        console.log(`File loaded locally - uploading`)
        fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=media', {
            method: 'POST',
            headers: {
                'Content-Type': file.type,
                'Content-Length': file.size
            },
            body: reader.result
        })
        .then(data => data.json())
        .then(console.log)
        .catch(console.error)
    }
    reader.readAsArrayBuffer(file);
})