我試圖訪問HTMLElementInput.files.path發送到我的後端cloudinary進行處理。我遇到的問題是對象上現在有path鍵。無法訪問文件上傳路徑密鑰

我一直在讀通過MDN Input page，我敢肯定我沒有做錯什麼用的標記。下面是我攔截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引導。我在開發過程中遇到了這個問題，以及在構建生產服務時遇到這個問題。

來源

2017-08-01 rockchalkwushock

我還是一個electron的心態，並沒有想過這MDN告訴我真相是，瀏覽器不給我訪問的硬盤路徑出於安全原因，系統上的文件。這是在Reactiflux送給我的這個代碼框中顯示了獲得最終的目標我一直在尋找，非常感謝@BTM此一方法：用ES6

https://codesandbox.io/s/lNN5pK6M

來源

2017-08-01 20:52:54 rockchalkwushock

你缺少事件周圍的方括號，而在捕捉事件提交。將其更改爲下面的代碼，並嘗試：

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

來源

2017-08-01 15:32:11

傳遞單，當你不需要括號論據 – rockchalkwushock

感謝您更新我的知識。 –

無法訪問文件上傳路徑密鑰

更新

回答

相關問題