Upload und lesen Sie eine Datei in reagieren

Question

Ich versuche, eine Datei mit React hochladen und sehen Sie sich den Inhalt, aber was es mir ist C:\fakepath\. Ich weiß, warum es fakepath gibt, aber was ist der richtige Weg, um den Inhalt einer Datei in Reaktion zu laden und zu lesen?

<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

Um die Datei Informationen, die Sie wollen bekommen event.target.files verwenden, die eine Reihe von ausgewählten Dateien ist. Jede dieser Dateien kann einfach über ein FormData Objekt hochgeladen werden. Siehe unten Snippet zum Beispiel:

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>

Sie können in FileReader aussehen soll, welche helfen können, wenn Sie die Datei auf der Client-Seite zu handhaben möchten, zum Beispiel um ein Bild anzuzeigen.

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

Answer 2

Haben Sie Dropzone verwenden? siehe

einfach zu implementieren, Upload und URL zurückgeben, wenn dies wichtig ist.

onDrop: acceptedFiles => { 
    const req = request.post('/upload'); 
    acceptedFiles.forEach(file => { 
     req.attach(file.name, file); 
    }); 
    req.end(callback); 
}