React - Wie lade ich eine Bilddatei hoch

Ich habe den unten stehenden Code verwendet, um ein Bild hochzuladen. Ich möchte nur verstehen, ob der Zugriff auf ein Element über document.querySelector ('img') eine gute Übung ist oder nicht. Da ich gehört habe, dass du nicht direkt auf dom element zugreifen solltest. Gibt es eine reaktive Möglichkeit dies zu tun?React - Wie lade ich eine Bilddatei hoch

previewFile() { 
 
    var preview = document.querySelector('img'); //selects the query named img 
 
    var file = document.querySelector('input[type=file]').files[0]; //sames as here 
 
    var reader = new FileReader(); 
 

 
    reader.onloadend = function() { 
 
     let pic = { "url": "", val: "0" }; 
 
     pic.url = reader.result; 
 
     this.picArray.push(pic); 
 
     this.setState({ pics: this.picArray }); 
 
}.bind(this); 
 

 
    if (file) { 
 
     reader.readAsDataURL(file); //reads the data as a URL 
 
    } else { 
 
     preview.src = ""; 
 
    } 
 
    }

Quelle

2017-11-30 pKay

Ich denke ref ist kein guter Weg (außer es gibt keinen anderen Weg).

Für mich werde ich OnChange-Ereignis verwenden, um die Datei zu erhalten.

Die Datei kann auf den Status für die spätere Verwendung eingestellt werden (Upload, wenn Sie auf die Schaltfläche zum Senden klicken) oder direkt an die API gesendet werden.

handleFileUpload(e) { 
    const file = e.target.files[0]; // this is the file you want 
    // do the rest here 
} 

// Component render 
<input type="file" onChange={this.handleFileUpload} />

Quelle

2017-11-30 09:14:30

„Ich denke, ref kein guter Weg ist (außer es gibt keinen anderen Weg)“. Du widersprichst dir selbst. + onChange ist ein Ereignis. Es ist eine schlechte Übung, Ereignis-Listener für Nicht-Ereignis-Zwecke hinzuzufügen. + Wenn Sie sich noch für ein Ereignis entscheiden, sollten Sie in Ihrem Callback das 'file.target' und nicht 'event [0]' + in Ihrem Callback ansprechen. Die 'Datei' ist ein Verlust-Typ, der die Bindung an diesen tatsächlichen Wert garantiert Element, während refs, wenn 100% das Element bereitstellt, an dem Sie arbeiten werden. –

@LiorG "Es ist eine schlechte Übung, Ereignis-Listener für Nicht-Ereigniszwecke hinzuzufügen". Was bedeutet das überhaupt? Wie ist es eine schlechte Praxis? Wenn das Element ein Ereignis hat, das ausgelöst wird, ist es eindeutig kein Nicht-Ereignis-Zweck. Dies ist genau so, wie Sie es in React tun sollten, um Refs zu vermeiden. Dies ist auch die Art, wie 'dropZone'-Bibliotheken es tun. –

@LiorG Sorry für falsche Parameter beim onChange-Ereignis. Ich habe es repariert. –

-1

Ich glaube, dass für das, was Sie suchen, reagieren refs ist.

Mit refs binden Sie das React-Element ohne document.querySelector an Ihre class.

React ruft den ref-Callback mit dem DOM-Element auf, wenn die Komponente geladen wird, und ruft beim Aushängen mit null auf.

Zum Beispiel: Sie werden das <img> Element binden etwa so: <img refs={imgElement => this.imgElement = imgElement}/>

previewImage() { 
 
    var img = this.img // OR just use the this.img bcz it's cached already 
 
}

Quelle

2017-11-30 09:09:44

Wenn u votedown in der Regel u eine explenation bieten .. –

Sie den Referee

auf dieses Element festlegen

render() { 
    return (.... <input type='file' ref={element => this.fileInput = element)} ...

dann in Ihre Upload-Funktion, yo Sie können dieses Element beziehen.

Quelle

2017-11-30 09:13:12

React - Wie lade ich eine Bilddatei hoch

Antwort

Verwandte Themen