Bildgröße vor dem Hochladen erhalten in React

Question

Die gewünschten Ergebnisse wurden in Vanille here

Um klar zu sein geschehen ist, werde ich nicht alert() verwenden, würde Ich mag die Dimensionen im state Objekt platzieren.

Wie würde ich diesen Code in React unter dem OnChange() Event-Handler neu erstellen?

---

Answer 1

Ich habe ein imgsrc, dass etwas wie folgt aussieht:

ich so das Problem mit dem Code lösen konnte

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

Reagieren ist noch JavaScript, um alles, was Sie in regelmäßigen js tun können, in Reaktion erfolgen. Auf einer hohen Ebene ist React nur das Framework, mit dem Sie mehr modularen wiederverwendbaren Code erstellen können.

Mit diesem gesagt, als React Entwickler zu denken, sollten Sie den Upload-Prozess zuerst erstellen, dass in einer separaten Klasse arbeiten. Die Klasse könnte ein Bild durch ihre Requisiten akzeptieren. Sobald dies korrekt funktioniert, können Sie eine Komponente höherer Ordnung erstellen, die die Upload-Komponente umschließt oder stattdessen die Upload-Komponente als Parameter empfängt und die Bildgröße überprüft. An dieser Stelle können Sie eine ungültige Komponente zurückgeben oder das Bild einfach verarbeiten und hochladen.

Vielleicht möchten Sie sich ein paar Tutorials zu Erste Schritte mit React ansehen. Dies ist ein hervorragender Start egghead.io