[Spring Boot] Base64 이미지 관리

Spring Boot, MySQL, React

---

1. 컨트롤러

1-1 MultipartFile을 이용해서 이미지 받아오기

1-2 받은 이미지 Base64로 인코딩 후 String에 저장

1-3 데이터 베이스 저장을 위해 서비스로 전달

@PostMapping()
    public ResponseEntity<String> save(MultipartFile image) throws IOException {
        String photoImg = null;
        if (image != null) {
            Base64.Encoder encoder = Base64.getEncoder();
            byte[] photoEncode = encoder.encode(image.getBytes());
            photoImg = new String(photoEncode, "UTF8");
        }
        if (testService.saveImage(photoImg) != null) {
            return ResponseEntity.status(200).body(photoImg);
        }
        return ResponseEntity.status(500).body("error");
    }

---

2. 서비스

2-1 MySql 저장(JPA 사용)

2-2 글자수가 매우 많기 때문에 MySQL MEDIUMBLOB 데이터 타입 사용

public String saveImage(String photoImg) {
        return TestRepository.save(photoImg);
	}

---

3. 리액트

3-1 이후 리액트에서 위에 저장한 데이터를 GET 요청 받은 후 'data:image/png;base64 태그 이용해서 출력

<img className="PhotoImage" alt="PhotoImage" src={'data:image/png;base64,' + PhotoImage}/>