obtenir la taille de l'image avant de les charger dans React

Question

Les résultats escomptés ont été faits dans la vanille here

Pour être clair, je ne vais pas utiliser alert(), je voudrais placer les dimensions dans l'objet state.

Comment est-ce que je recréerais ce code dans Réagir sous le gestionnaire d'événements OnChange()?

---

Answer 1

J'ai un imgsrc qui ressemble à ceci:

j'ai pu résoudre le problème avec le code comme celui-ci

if (e.target.files && e.target.files[0]) { 
    var img = document.createElement("img"); 
    this.state.backgroundImageFile = e.target.files[0]; 

    img.onload = function() { 
    debugger; 
    console.log(this.width + " " + this.height); 
    }); 

    var reader = new FileReader(); 
    reader.onloadend = function (ended) { 
    img.src = ended.target.result; 
    } 
reader.readAsDataURL(e.target.files[0]); 
} 

Answer 2

React est encore JavaScript, tout ce que vous faites dans js réguliers peut être fait dans React. À un niveau élevé, React est juste le cadre qui vous aide à créer du code réutilisable plus modulaire. Cela étant dit, en pensant comme un développeur React, vous devez d'abord créer le processus de téléchargement pour que cela fonctionne dans une classe distincte. La classe pourrait accepter une image à travers ses accessoires. Ensuite, une fois que cela fonctionne correctement, vous pouvez créer un composant d'ordre supérieur qui enveloppe le composant de téléchargement ou plutôt reçoit le composant de téléchargement en tant que paramètre et vérifie la taille de l'image. À ce stade, vous pouvez retourner un composant invalide ou simplement traiter l'image et télécharger.

Vous pouvez consulter quelques tutoriels sur le début de React. Ce est un excellent départ egghead.io