[스트링부트]base64 파일 전송

1. 개념

• 왜 Base64?
1. 아스키코드 제한: 데이터를 아스키코드로 전송할 수 없어 데이터를 문자열(Base64)로 변환 필요.
2. 문자열화 과정: 데이터를 Base64로 인코딩하여 문자열로 변환 후 전송.

• Base64 전송 방식:
1. 데이터를 Base64로 인코딩.
2. Base64 데이터는 6비트 단위로 처리되어 문자열 형태로 변환.
3. 전송 후, 수신 측에서 Base64 데이터를 다시 디코딩.

• 암호화와의 차이점:
• Base64는 암호화 방식이 아닌, 단순히 데이터를 양방향 인코딩/디코딩하는 과정.
• 전송 중 데이터가 손상되지 않도록 안전하게 문자열화하는 역할.

2. 통신 방식

• Ajax로 JSON 전송
1. HTML에서 파일과 텍스트 데이터를 업로드.
2. JavaScript의 Fetch API나 AJAX를 사용하여 데이터를 JSON 형식으로 서버에 전송.
3. 파일 데이터는 Base64로 인코딩되어 JSON에 포함.

3. 스트링부트에 Base64 적용

• Client Side (HTML & JS)
1. HTML <input> 태그에서 파일 업로드 및 제출 버튼 생성.
2. JavaScript로 파일 데이터를 읽어 Base64로 인코딩.
3. JSON 형식으로 파일(Base64 문자열)과 텍스트 데이터를 서버에 전송.

• Server Side (Spring Boot)
1. API 작성: @PostMapping으로 JSON 요청 처리.
2. Base64 문자열을 디코딩하여 바이너리 파일로 저장.

public class MyFileUtil {

    public static String fileSave(String base64) {
    
        // 1. 확장자 추출
        String mimeType = base64.substring(5, base64.indexOf(";base64,"));
        String result = mimeType.split("/")[1];

        // 2. Base64를 Byte 배열로 변환
        String imgName = UUID.randomUUID()+"."+result;
        String profileUrl = "images/"+imgName;
        String dbUrl = "/upload/"+imgName;

        String base64Data = base64.split(",")[1];
        byte[] decodedBytes = Base64.getDecoder().decode(base64Data);

        // 3. DTO에 사진을 파일로 저장 (images 폴더)
        try {
            Path path = Paths.get(profileUrl);
            Files.write(path, decodedBytes);
            return dbUrl;
        } catch (IOException e) {
            throw new RuntimeException(e.getMessage());
        }
    }
}

• 공통DTO생성

@AllArgsConstructor
@Data
public class Resp<T> {
    private Boolean success;
    private String msg;
    private T data;
}

• 컨트롤러

  // ajax 이용 - page 줘
    @GetMapping("/file2")
    public String file2() {
        return "file2";
    }

    // action
    @PostMapping("/v2/upload")
    // 공통DTO 필요 > ResponseEntity로 해야지 JSON받아짐
    public ResponseEntity<?> v2Upload(@RequestBody UploadRequest.V2DTO v2DTO) {
        uploadService.v2사진저장(v2DTO);
        Resp resp = new Resp(true, "성공", null);
        return ResponseEntity.ok(resp);
    }

    // form 태그 이용
    @GetMapping("/file2-check")
    public String file2Check(Model model) {
        Upload upload = uploadService.사진보기();
        model.addAttribute("model", upload);
        return "file2-check";
    }

• 서비스

public Upload 사진보기() {
        return uploadRepository.findById(1);
    }

    @Transactional
    public void v2사진저장(UploadRequest.V2DTO v2DTO) {
        String profileUrl = MyFileUtil.fileSave(v2DTO.getImg());
        uploadRepository.save(v2DTO.toEntity(profileUrl));
    }