React.js Vorschau eines Bildes mit Eingabetypdatei

Question

Derzeit versuche ich, beim Hochladen einer Bilddatei eine Vorschau eines Bildes anzuzeigen. Ich kann das Bild und das Konsolenprotokoll empfangen, kann es jedoch nicht im img-Tag anzeigen.

Hier ist die Art und Weise, wie ich versuche, sie zu rendern:

<input type='file' id="uploadImage" onChange={this.handleImageChange} className="upload-input" />
<label htmlFor="uploadImage" className="upload-image-button">Choose An Image</label>
{this.state.imagePreview[0] ?
  <img src={this.state.imagePreview[0]} alt="" className="image-preview" /> 
  :
  <img alt="" className="image-preview" />
}

Hier sind mein Status und mein Handle zur Änderungsmethode für die Eingabe:

state = {
  imagePreview: {}
}

handleImageChange = async (e) => {
  console.log(e.target.files)
  await this.setState({ imagePreview: e.target.files })
  console.log(this.state.imagePreview)
}

Hier sind meine Konsolenprotokolle für die Dateien: Geben Sie hier die Bildbeschreibung ein

Answer 1

Sie müssen ein FileReaderObjekt verwenden, um die base64-Daten abzurufen und auf die Quelle des Image-Tags anzuwenden.

Ich sehe auch keine Notwendigkeit dafür, dass dies eine asyncFunktion ist (es sei denn, Sie haben der Kürze halber ein Versprechen ausgelassen, mit dem Sie arbeiten).

Nach dem von Ihnen präsentierten Code sollte so etwas funktionieren:

handleImageChange(event) {

   const file = event.target.files[0];
   const reader = new FileReader();

   reader.onload = function(event) {
     // The file's text will be printed here, if you want to see the base64
     console.log(event.target.result)
     // Set state with base64 data
     this.setState({ imagePreview: e.target.result })
   };

   reader.readAsText(file);
}

HTML (oder jsx) würde ungefähr so ​​aussehen:

<img src={this.state.imagePreview} alt="" className="image-preview" />