React.js Aperçu d'une image avec un fichier de type d'entrée
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
Vous devrez utiliser un FileReader
objet, 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 async
fonction (à 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" />