React.js Pré-visualização de uma imagem com arquivo de tipo de entrada

Question

Atualmente, estou tentando visualizar uma imagem no upload de um arquivo de imagem. Consigo receber a imagem e o log do console, porém não consigo exibi-lo na tag img.

Esta é a maneira que estou tentando renderizá-los:

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

Aqui estão meu estado e meu método de mudança para a entrada:

state = {
  imagePreview: {}
}

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

Aqui estão os registros do meu console para os arquivos: insira a descrição da imagem aqui

Answer 1

Você precisará usar um FileReaderobjeto, a fim de obter os dados base64 e aplicá-los à origem da marca da imagem.

Além disso, não vejo necessidade de que isso seja uma asyncfunção (a menos que, por uma questão de brevidade, você tenha omitido uma promessa com a qual está trabalhando).

A partir do código que você apresentou, algo assim deve funcionar:

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 (ou jsx) seria algo assim:

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