ReactJS + Redux : Mozilla File API를 사용하여 로컬 이미지를 선택하고 웹에 업로드하는 방법?

Question

버튼을 갖고 싶으면 클릭하고 로컬 디렉토리를 열어 사용자가 이미지를 선택할 수 있도록합니다. 선택한 후에는 해당 디렉토리 소스 주소를 저장하고이를 <img src=""/>의 src에 전달하여 표시해야합니다.

나는 그것을 달성하기 위해 다음 사용하는 것을 시도하고있다 : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

그것의 HTML은 다음과 같습니다

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> 
    ) 
    } 
} 

과 JS입니다 : HTML에 대한 <input ...>를 들어

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); 
  } 
  } 
} 

오류가 발생했습니다 : Unterminated JSX contents. 무엇이 문제 일 수 있습니까? 나는/<input.../>에 대한 추가를 시도했지만 여전히 오류가 발생합니다.

또한 JS를 수정하여 하나의 이미지 파일을 선택하고 해당 디렉토리 소스 주소를 <img/>의 src로 전달할 수있게하려면 어떻게해야합니까?

Answer 1

React를 사용할 때 document.getElementById와 같은 직접적인 DOM 조작을 사용하고 싶지 않다는 것이 Dodekeract의 말입니다. React는 가상 DOM과 함께 작동하고 실제 DOM 상호 작용을 처리하므로 빠른 속도입니다. 거기에 어떤 점에서 더 많은 것을 배우는 것이 분명 가치가있는 마술이 있습니다. 당신은 일반적으로, 소품과 주를 사용하여 렌더링 기능에서 가상 DOM에 글을 쓰는 방식으로 일을해야합니다.

구성 요소는이 (안된)의 모양은 다음과 같습니다

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> 
     ); 
    } 
} 

이 구성 요소에게 국회 의사당 첫 번째 문자, 따라서 "FileUploader"를 제공하기 위해 기존입니다.