React 활용 - 6 : 첨부 이미지 파일 미리보기 (react 이미지 미리보기, react state 배열)

reactBootTemplate/src/webapp/reactspringfront/src/Screens/FileData.js

@@ -3,11 +3,29 @@ import axios from 'axios';
 
 function FileData() {
   const [file, setFile] = useState(null);	//파일	
-
+  const [imgBase64, setImgBase64] = useState([]); // 파일 base64
   const handleChangeFile = (event) => {
     console.log(event.target.files)
     setFile(event.target.files);
-
+    setImgBase64([]);
+
+    for(var i=0;i<event.target.files.length;i++){
+      if (event.target.files[i]) {
+        let reader = new FileReader();
+        reader.readAsDataURL(event.target.files[i]); // 1. 파일을 읽어 버퍼에 저장.
+        // 파일 상태 업데이트
+        reader.onloadend = () => {
+          // 2. 읽기가 완료되면 아래코드가 실행.
+          const base64 = reader.result;
+          if (base64) {
+          // 문자 형태로 저장
+          var base64Sub = base64.toString()
+          // 배열 state 업데이트
+          setImgBase64(imgBase64 => [...imgBase64, base64Sub]);
+          }
+        }
+      }
+    }
 
   }
 
@@ -36,7 +54,10 @@ function FileData() {
             <div>
                 fileData1:  <input type="file" id="file" onChange={handleChangeFile} multiple="multiple"></input>
             </div>
-
+            <div>
+              <h3>이미지 미리보기 영역</h3>
+              {imgBase64.map((item) => {return <img src={item} style={{maxHeight:"300px",maxWidth:"300px"}}></img>})}
+            </div>
 
             <div>
                 <button onClick={()=> Send()}>Send</button>