이미지 업로드, DB 저장

이미지 업로드 방식은 두가지로 정의할 수 있다.

첫번째. 파일 업로드 버튼을 사용해서 올리게 되는 방법이다.

Multi part 프로토콜 방식이며, 이 때는 브라우저가 해당 프로토콜에 맞게 올려주게 된다.

파일을 업로드하는 메소드는 POST를 사용한다.

특이점은 Body에 보내는 데이터의 콘텐트 타입이 form data 이지만, 여러부분으로 나누어서 보낸다.

 

두번재. json 방식으로 보내는 방식이다. 이미지는 binary로 구성되어있으므로, json으로 보내기 위해 string으로 변경해야 한다.

Binary data를 base64로 인코딩에서 전송한다.

 

이 포스트에서는 첫번째 방식으로 구현해보자 한다.

Datagrip 에서 아래의 DDL문을 실행해 image 테이블을 먼저 생성한다.

create table image
(
    id            int auto_increment 			primary key,
    mimetype      varchar(100)                          null,
    data          longblob                              null,
    original_name varchar(100)                          null,
    created       timestamp default current_timestamp() null
);

 

이미지 업로드 API

ImaveVO.java

import lombok.Data;
 
@Data
public class ImageVO {
    private Integer id;
    private String mimetype;
    private String original_name;
    private byte[] data;
    private String created;
}

Persistence에 ImageMapper 구현

ImageMapper.interface

import com.sanghun.fullstack.domain.ImageVO;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface ImageMapper {

    @Insert({"<script>",
            "INSERT INTO image(mimetype, original_name, data)",
            "VALUES(#{mimetype}, #{original_name}, #{data})",
            "</script>"})
    @Options(useGeneratedKeys = true, keyProperty = "id")
    int insertBoard(ImageVO imageVO);
}

Controller에 ImageController 구현

@RequiredArgsConstructor
@RestController
@RequestMapping("/api/image")
public class ImageController {
    private final ImageMapper imageMapper;

    @PostMapping("/upload")
    public Integer handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {

        ImageVO imageVO = new ImageVO();
        imageVO.setMimetype(file.getContentType());
        imageVO.setOriginal_name(file.getOriginalFilename());
        imageVO.setData(file.getBytes());
        imageMapper.insertBoard(imageVO);

        return imageVO.getId();
    }
}

 

POSTMAN TEST