스프링부트, 리액트 파일 업로드

참고사이트

[REACT x SPRING BOOT] Axios + multipart/form-data 깔끔하게 받기 (파일 + 게시물 동시에 받기)

[REACT x SPRING BOOT] Axios + multipart/form-data 깔끔하게 받기 (파일 + 게시물 동시에 받기)

 

스프링 부분

@Data
@NoArgsConstructor
@AllArgsConstructor
public class ItemDto {
    private String name;
    private String category;
    private int price;
    private String photoPath;
    private int stockQuantity;
}

@PostMapping("/menuAdd")
public String MenuAdd(@RequestPart MultipartFile file,
                      @RequestPart("data") ItemDto itemDto){
log.info("file {}", file);
log.info("item {}", itemDto);
    return "ok";
}

리액트 부분

const SaveDB = async(formData)=>{
        let axiosConfig = {
            headers: {
                "Content-Type": "multipart/form-data",
            }
        }
        try{
            let response  = await axios.post("<http://localhost:8080/menuAdd>",formData,axiosConfig)
            alert("성공적으로 저장되었습니다.");
        }catch{
            alert("에러");
        }
    }

    const onSubmit =  (e) => {
        e.preventDefault(); // 새로고침 막기
        e.persist(); // 새로고침 막기
        let formData = new FormData(); // formData 객체를 생성한다.

        let files = e.target.imgFile.files; // Form의 input을 들고온다.
        for (let i = 0; i < files.length; i++) { 
          formData.append("file", files[i]); // 반복문을 활용하여 파일들을 formData 객체에 추가한다
        }
        const params = {
            category : 카테고리ref.current.value,
            name : 메뉴이름ref.current.value,
            price : 가격ref.current.value,
            stockQuantity : 재고ref.current.value,
            photoPath : 이미지경로ref.current.value,
        }
        formData.append("data", new Blob([JSON.stringify(params)], { type: "application/json" }));      
        SaveDB(formData); 
      };

<div className={styles.tbdiv}>
        <form onSubmit={(e) => onSubmit(e)}>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <label>카테고리</label>
                        </td>
                        <td>
                            <select ref={카테고리ref}>
                                <option value={"Food"}>음식</option>
                                <option value={"Drink"}>음료</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>메뉴이름</label>
                        </td>
                        <td>
                            <input ref={메뉴이름ref}></input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>가격</label>
                        </td>
                        <td>
                            <input ref={가격ref}></input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>재고</label>
                        </td>
                        <td>
                            <input ref={재고ref}></input>
                        </td>
                    </tr>
   
                    <tr>
                        <td>
                            <label>이미지</label>
                        </td>
                      

                        
                        <td>
                            <input readOnly ref={이미지경로ref}></input>
                            <input type="file" name="imgFile" ref={이미지파일ref}></input>
                        </td>
                        <td>
                            <button>찾기</button>
                        </td>
                    </tr>    
                </tbody>
            </table>

            <div className={styles.btns}>
                <button>취소</button>
                <button type="submit">저장</button>
            </div>
            </form>

application.yml 환경변수 설정

file.dir: \\c:\\upload\\

controller 변수 가져오기, 파일 저장하기

@Value("${file.dir}")
String fileDir;

if(!file.isEmpty()){
    String fullPath = fileDir + file.getOriginalFilename();
log.info("파일저장 fullPath={}", fullPath);
    file.transferTo(new File(fullPath));
}

파일 보여주기

@ResponseBody
@GetMapping("/images/{filename}")
public Resource downloadImage(@PathVariable String filename) throws MalformedURLException {
    // UrlResource로 파일을 읽어서 @ResponseBody로 이미지 바이너리를 반환한다.
    // fullPath로 전체 경로 /Users/... 를 가져온다.
    return new UrlResource("file:" + fileDir + filename);
}