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

이번 시간에는 react - spring 간 파일 데이터 전송을 구현해보자.

 

우선 파일 데이터를 보낼 FileData.js 를 Screen 폴더 아래 아래와 같이 만들어준다.

 

FileData.js

import React from 'react';

function FileData() {
  
  
  }
    return (
        <div>
            FileData
            <div>
                fileData1:  <input type="file" id="file"multiple="multiple"></input>
            </div>
          
            
            <div>
                <button>Send</button>
            </div>
        </div>
    );
  }
export default FileData;

 

file 데이터를 저장 할 state를 선언한다.

 

import React, { useState, useEffect } from 'react';
import axios from 'axios'; 

function FileData() {
  const [file, setFile] = useState(null);	//파일	
  
  

  function Send(){
  
  
  }
    return (
        <div>
            FileData
            <div>
                fileData1:  <input type="file" id="file" multiple="multiple"></input>
            </div>
          
            
            <div>
                <button onClick={()=> Send()}>Send</button>
            </div>
        </div>
    );
  }
export default FileData;

 

file input 이 변경될 때 파일 정보를 state에 담기 위해 handleChangeFile 함수를 아래와 같이 작성한다.

import React, { useState, useEffect } from 'react';
import axios from 'axios'; 

function FileData() {
  const [file, setFile] = useState(null);	//파일	
  
  const handleChangeFile = (event) => {
    setFile(event.target.files);
  }

  function Send(){
   
  
  }
    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;

Send 함수에서 FormData를 이용해 파일 데이터를 form에 저장하여 axios로 spring에 전송한다.

반응형

import React, { useState, useEffect } from 'react';
import axios from 'axios'; 

function FileData() {
  const [file, setFile] = useState(null);	//파일	
  
  const handleChangeFile = (event) => {
    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;

 

react 에서의 작업은 여기까지 진행하고, 해당 데이터를 받기 위해 spring 코드를 작성한다.

 

TestController.java에 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;
}

 

* 코드설명

1) @RequestParam(value="file", required=false) MultipartFile[] files

    -> 해당 코드를 통해 전송되는 단중파일 데이터를 files 변수에 받아온다.

2) String safeFile =System.currentTimeMillis() + originFileName;

   -> 파일명이 중복되지 않도록 시스템 현재 밀리초 시간과 원본 파일명을 조합하여 파일명을 새로 만들어준다.

3) File f1 = new File(filepath+safeFile);
    mf.transferTo(f1);

   -> 전송된 파일을 지정 경로에 저장시킨다.

 

테스트영상 보기

https://www.youtube.com/watch?v=wvlHROwO3Os

 

코드보기

https://github.com/sonhoil/reactBootTemplate/commit/d9a3ffc7706117854e819d94f51ebe6a150de65b

React 활용 - 5 : Spring에 파일데이터 전송하기 (react 다중 파일) · sonhoil/reactBootTemplate@d9a3ffc