ReactJS Base64-Datei-Upload

Question

Ich habe diese Funktion auf einem Reagieren Komponente

handleChangeImage: function (evt) { 
    console.log("Uploading"); 
    var self = this; 
    var reader = new FileReader(); 
    var file = evt.target.files[0]; 

    reader.onload = function(upload) { 
     self.setState({ 
      image: upload.target.result 
     }); 
    }; 
    reader.readAsDataURL(file); 
    console.log(this.state.image); 
    console.log("Uploaded"); 
}, 

und wird hier

<input ref="file" type="file" name="file" 
           className="upload-file" 
           id="file" 
           onChange={this.handleChangeImage} 
           encType="multipart/form-data" 
           required/> 

genannt Ich versuche, das Base64-String zu erhalten über AJAX zu einem Server laufen zu senden Flasche. Das Problem ist, jedes Mal wenn ich eine Datei auswählen, wird es als null in der Konsole angemeldet ist

Lustige Sache ist, wenn ich versuche, die Datei ein zweites Mal wählen sie nun die gesamte Zeichenfolge protokolliert. Ich muss etwas einfaches verpassen ...

Answer 1

Es wird als Null in der Konsole protokolliert, weil der Status zum Zeitpunkt des Ausdrucks nicht geändert wurde. Wenn Sie die Datei zum zweiten Mal auswählen, gehört die in der Konsole angemeldete Zeichenfolge tatsächlich zu der zuvor ausgewählten Datei. Der Status ist noch nicht in die zweite Datei geändert, die Sie auswählen.

Mit Bezug auf React's doc:

setState() mutiert nicht sofort, sondern schafft einen this.state anhängigen Zustandsübergang. Der Zugriff auf this.state nach dem Aufruf dieser Methode kann möglicherweise den vorhandenen Wert zurückgeben. Es gibt keine Garantie von synchronen Betrieb von Anrufen zu setState und Anrufe können für Leistungssteigerungen gebündelt werden.

Wenn Sie den richtigen Zustand drucken möchten, können Sie es in der Callback-Funktion log:

self.setState({ 
    image: upload.target.result 
}, function() { 
    console.log(self.state.image); 
}); 

Dies funktioniert auch, wenn der Zustand nach der 1s Verzögerung geändert werden sollte:

reader.onload = function(upload) { 
    self.setState({ 
     image: upload.target.result 
    }); 
}; 
reader.readAsDataURL(file);  
setTimeout(function() { 
    console.log(self.state.image); 
}, 1000);