React 활용 - 5 : Spring에 파일데이터 전송하기 (react 다중 파일)

reactBootTemplate/src/main/java/com/reactboot/template/controller/TestController.java

@@ -1,15 +1,20 @@
 package com.reactboot.template.controller;
 
+import java.io.File;
+import java.io.IOException;
 import java.sql.SQLException;
 import java.util.HashMap;
 import java.util.Map;
 
 import javax.servlet.http.HttpServletRequest;
+
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
 
 
 @RestController
@@ -31,4 +36,44 @@ public  Map<String,Object> AxiosTest (HttpServletRequest request,@RequestBody Ma
 		return resultMap;
 	}
 
+	/**
+	 * @param requestMap
+	 * @return Map<String, Object>
+	 * @throws SQLException
+	 * @description AxiosFileTest
+	 */
+
+	@RequestMapping(value="AxiosFileTest.do", method=RequestMethod.POST)
+	public  Map<String,Object> AxiosFileTest (HttpServletRequest request, @RequestParam(value="file", required=false) MultipartFile[] files) throws SQLException  {
+		Map<String,Object> resultMap = new HashMap<String,Object>();
+		String FileNames ="";
+		System.out.println("paramMap =>"+files[0]);
+
+		String filepath = "C:/saveFolder/";
+		   for (MultipartFile mf : files) {
+
+	            String originFileName = mf.getOriginalFilename(); // 원본 파일 명
+	            long fileSize = mf.getSize(); // 파일 사이즈
+
+	            System.out.println("originFileName : " + originFileName);
+	            System.out.println("fileSize : " + fileSize);
+
+	            String safeFile =System.currentTimeMillis() + originFileName;
+
+	            FileNames = FileNames+","+safeFile; 
+	            try {
+	            	File f1 = new File(filepath+safeFile);
+	                mf.transferTo(f1);
+	            } catch (IllegalStateException e) {
+	                e.printStackTrace();
+	            } catch (IOException e) {
+	                e.printStackTrace();
+	            }
+	        }
+		Map<String, Object> paramMap = new HashMap<String, Object>();
+		FileNames = FileNames.substring(1);
+		System.out.println("FileNames =>"+ FileNames);
+		resultMap.put("JavaData", paramMap);
+		return resultMap;
+	}
 }

reactBootTemplate/src/webapp/reactspringfront/src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import FirstScreen from './Screens/FirstScreen'
 import HeaderHideScreen from './Screens/HeaderHideScreen'
 import TextData from './Screens/TextData'
+import FileData from './Screens/FileData'
 import Header from './Screens/Header'
 import {
   BrowserRouter as Router,
@@ -21,6 +22,7 @@ function App() {
             <Route path="/FirstScreen"  element={<FirstScreen />}></Route>
             <Route path="/HeaderHideScreen"  element={<HeaderHideScreen />}></Route>
             <Route path="/TextData"  element={<TextData />}></Route>
+            <Route path="/FileData"  element={<FileData />}></Route>
           </Routes>
           </div>
     </Router>

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

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios'; 
+
+function FileData() {
+  const [file, setFile] = useState(null);	//파일	
+
+  const handleChangeFile = (event) => {
+    console.log(event.target.files)
+    setFile(event.target.files);
+
+
+  }
+
+  function Send(){
+    const fd = new FormData();
+    Object.values(file).forEach((file) => fd.append("file", file));
+
+
+    axios.post('/test/AxiosFileTest.do', fd, {
+      headers: {
+        "Content-Type": `multipart/form-data; `,
+      },
+      baseURL: 'http://localhost:8080'
+    })
+    .then((response) => {
+
+    })
+    .catch((error) => {
+      // 예외 처리
+    })
+
+  }
+    return (
+        <div>
+            FileData
+            <div>
+                fileData1:  <input type="file" id="file" onChange={handleChangeFile} multiple="multiple"></input>
+            </div>
+
+
+            <div>
+                <button onClick={()=> Send()}>Send</button>
+            </div>
+        </div>
+    );
+  }
+export default FileData;  

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

@@ -19,6 +19,8 @@ function Header() {
         <Link to="/HeaderHideScreen">HeaderHideScreen</Link>
         <br></br>
         <Link to="/TextData">TextData</Link>
+        <br></br>
+        <Link to="/FileData">FileData</Link>
       </div>
 
     );