React.js Anteprima di un'immagine con file di tipo di input

Question

Attualmente sto cercando di visualizzare in anteprima un'immagine su un caricamento di un file immagine. Posso ricevere l'immagine e il log della console, ma non posso visualizzarli nel tag img.

Ecco il modo in cui sto cercando di renderli:

<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" />
}

Ecco il mio stato e il mio metodo di modifica per l'input:

state = {
  imagePreview: {}
}

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

Ecco i miei log della console per i file: inserisci qui la descrizione dell'immagine

Answer 1

Dovrai utilizzare un FileReaderoggetto per ottenere i dati base64 e applicarli all'origine del tag immagine.

Inoltre, non vedo alcuna necessità che questa sia una asyncfunzione (a meno che, per brevità, non si sia tralasciata una promessa con cui si sta lavorando).

Dal codice che hai presentato, qualcosa del genere dovrebbe funzionare:

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 (o jsx) sarebbe simile a questo:

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