ReactJS + Redux: Wie verwende ich die Mozilla File API, um ein lokales Bild auszuwählen und ins Web hochzuladen?

Question

Ich möchte eine Schaltfläche haben und sobald es geklickt wird, öffnet es das lokale Verzeichnis und ermöglicht dem Benutzer ein Bild auszuwählen. Sobald ich gewählt habe, möchte ich diese Verzeichnisquelladresse speichern und sie an die Quelle <img src=""/> übergeben, um sie anzuzeigen.

Ich versuche, die folgenden zu verwenden, um das zu erreichen: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Der HTML-Code ist:

export default class fileUploader extends Component { 
    render(){ 
    return(
     <div> 
     <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"/> 
     <a href="#" id="fileSelect">Select some files</a> 
     <div id="fileList"> 
      <p>No files selected!</p> 
     </div> 
     </div> 
    ) 
    } 
} 

und die JS ist:

window.URL = window.URL || window.webkitURL; 

var fileSelect = document.getElementById("fileSelect"), 
    fileElem = document.getElementById("fileElem"), 
    fileList = document.getElementById("fileList"); 

fileSelect.addEventListener("click", function (e) { 
    if (fileElem) { 
    fileElem.click(); 
    } 
    e.preventDefault(); // prevent navigation to "#" 
}, false); 

function handleFiles(files) { 
    if (!files.length) { 

    fileList.innerHTML = "<p>No files selected!</p>"; 

    } else { 

    fileList.innerHTML = ""; 
    var list = document.createElement("ul"); 
    fileList.appendChild(list); 

    for (var i = 0; i < files.length; i++) { 
     var li = document.createElement("li"); 
     list.appendChild(li); 

   var img = document.createElement("img"); 
   img.src = window.URL.createObjectURL(files[i]); 
   img.height = 60; 
   img.onload = function() { 
     window.URL.revokeObjectURL(this.src); 
   } 

     console.log(img.height) 

   li.appendChild(img); 
   var info = document.createElement("span"); 
   info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; 
   li.appendChild(info); 
  } 
  } 
} 

Für <input ...> für HTML Ich erhalte einen Fehler: Unterminated JSX contents. Was könnte das Problem sein? Ich habe versucht, add/für <input.../> noch wirft es immer noch einen Fehler.

Auch, wie sollte ich gehen über die JS zu überarbeiten, nur in der Lage sein, eine Bilddatei auszuwählen und diese Verzeichnis Quelladresse zu src <img/> übergeben?

Answer 1

Was Dodekeract sagt, ist, dass Sie keine direkte DOM-Manipulation wie document.getElementById verwenden möchten, wenn Sie React verwenden. React funktioniert mit einem virtuellen DOM und behandelt die tatsächlichen DOM-Interaktionen für Sie, weshalb es so schnell geht. Da gibt es Magie, die es wert ist, irgendwann mehr zu erfahren. Im Allgemeinen müssen Sie die React-Methode verwenden und Props und Status verwenden, um in Ihrer Renderfunktion in das virtuelle DOM zu schreiben.

Ihre Komponente sollte so etwas wie diese (nicht getestet) aussehen:

class FileUploader extends Component { 
    constructor() { 
     super(); 
     this.handleChange = this.handleChange.bind(this); 
     this.state = { file: false }; 
    } 

    handleChange(e) { 
     this.setState({ file: e.target.value }); 
    } 

    render(){ 
     const image = (this.state.file) ? <img src={this.state.file} /> : null; 

     return(
      <div> 
       <input type="file" id="fileElem" multiple accept="image/*" onChange={this.handleChange} style={{ display: 'none' }} /> 
       <a href="#" id="fileSelect"> 
        <label htmlFor="fileElem">Select some files</label> 
       </a> 
       <div id="fileList"> 
        {image} 
       </div> 
      </div> 
     ); 
    } 
} 

Es ist üblich, einer Komponente mit einem Kapitol ersten Brief zu geben, also „Fileuploader“.