ファイルアップロード時にパスキーにアクセスできない

Question

私はHTMLElementInput.files.pathにアクセスして、cloudinaryのバックエンドに送信しようとしています。私が実行している問題は、オブジェクトに現在pathキーが存在することです。

私はMDN Input pageを通読してきた、と私は、マークアップに何かをやっていないよかなり確信しています。私は困惑しています

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; 

：以下input上のデータを傍受するために私が持っているコードです。誰かが私がどこに間違っているのか見ている場合、またはgotchaと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

私はelectron考え方にまだあったし、今までにMDNがブラウザは私にAのハードパスへのアクセス権を与えないことを私に真実を言っていたとは思いませんでしたセキュリティ上の理由から、システム上のファイル。このコードReactifluxで私に送られたボックスは、このための@BTMに多くのおかげで、私が探していた最終的な目標を取得する方法を示していますES6と

https://codesandbox.io/s/lNN5pK6M

Answer 2

上のイベントをキャッチしているときには、イベントの周りに括弧が欠落しています提出してください。コードの下にそれを変更してみてください：

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