반응에있는 파일을 업로드하고 읽기

Question

나는 React로 파일을 업로드하려고하는데 그 내용을 보았습니다.하지만 그것이 내게주는 것은 C:\fakepath\입니다. 나는 그것이 fakepath을주는 이유를 알고 있지만, 반응하는 파일의 내용을 업로드하고 읽는 올바른 방법은 무엇입니까?

<input type="file" 
     name="myFile" 
     onChange={this.handleChange} /> 

handleChange: function(e) { 
     switch (e.target.name) { 
     case 'myFile': 
      const data = new FormData(); 
      data.append('file', e.target.value); 
      console.log(data); 
     default: 
      console.error('Error in handleChange()'); break; 
     } 
    }, 

Answer 1

파일 정보를 얻으려면 event.target.files 파일의 배열을 사용하십시오. 이들 각각은 FormData 개체를 통해 쉽게 업로드 할 수 있습니다. 예를 들어 미리보기 아래 참조 :

class FileInput extends React.Component { 
 
    constructor(props) { 
 
     super(props) 
 
     this.uploadFile = this.uploadFile.bind(this); 
 
    } 
 
    
 
    uploadFile(event) { 
 
     let file = event.target.files[0]; 
 
     console.log(file); 
 
     
 
     if (file) { 
 
      let data = new FormData(); 
 
      data.append('file', file); 
 
      // axios.post('/files', data)... 
 
     } 
 
    } 
 
    
 
    render() { 
 
     return <span> 
 
     <input type="file" 
 
     name="myFile" 
 
     onChange={this.uploadFile} /> 
 
     </span> 
 
    } 
 
} 
 

 
ReactDOM.render(<FileInput />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> 
 
<div id="root"></div>

당신은 클라이언트 측의 파일을 처리하려면 이미지를 표시하기 위해 예를 들어, 도움을 줄 수있는 FileReader을 조사 할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

dropzone을 사용하셨습니까? 이 부분을 참조하십시오 react-dropzone

쉬운 구현, 업로드 및 반환이 중요한 경우.