在文件上载时无法访问路径密钥

Question

我正在尝试访问HTMLElementInput.files.path以发送到我的后端以进行cloudinary处理。 我遇到的问题是现在对象上存在path键。

我一直在阅读MDN输入页面 ，我很确定我没有对标记做任何错误。 以下是我用于拦截input数据的代码：

class App extends Component {
  capture(e) {
    e.preventDefault();
    const image = document.querySelector('input').files[0];
    console.log(image);
    // image.path === undefined
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <form onSubmit={e => this.capture(e)}>
          <div>
            <label htmlFor="photo_image">Upload an image</label>
            <input id="photo_image" type="file" accept=".jpg, .jpeg, .png" />
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
   }
}

export default App;

我很难过。 如果有人看到我要去哪里错了，或者如果有一个疑难杂症 react ，我不知道我所有的耳朵！

更新

我之前应该留下这些信息，道歉。 该项目使用create-react-app自举。 我在开发中以及在生产中提供构建时遇到了这个问题。

• create-react-app@1.3.3
• react-scripts@1.0.10
• node@8.2.1
• yarn@0.27.5
• macOS@10.12.6
• chrome@59.0.3071.115

Answer 1

在捕获事件onSubmit时，您缺少事件的括号。 将其更改为以下代码并尝试：

<form onSubmit= {(e) => this.capture(e)}>

Answer 2

我仍然处于一种electron观念中，并且从来没有想到MDN告诉我真相，出于安全原因， 浏览器不允许我访问系统上文件的硬路径。 在Reactiflux中发送给我的这个代码框显示了一种获取我正在寻找的最终目标的方法，非常感谢@BTM：

https://codesandbox.io/s/lNN5pK6M