React.js Aperçu d'une image avec un fichier de type d'entrée

Aug 19 2020

Actuellement, j'essaie de prévisualiser une image lors du téléchargement d'un fichier image. Je peux recevoir l'image et le journal de la console, mais je ne peux pas l'afficher dans la balise img.

Voici la façon dont j'essaye de les rendre:

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

Voici mon état et mon handle sur la méthode de changement pour l'entrée:

state = {
  imagePreview: {}
}

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

Voici mes journaux de console pour les fichiers: entrez la description de l'image ici

Réponses

silencedogood Aug 19 2020 at 00:08

Vous devrez utiliser un FileReaderobjet, afin d'obtenir les données base64 et de les appliquer à la source de la balise d'image.

De plus, je ne vois aucun besoin pour cela d'être une asyncfonction (à moins que, par souci de concision, vous n'ayez omis une promesse avec laquelle vous travaillez).

D'après le code que vous avez présenté, quelque chose comme ça devrait fonctionner:

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) ressemblerait à ceci:

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