Vue.js 3에서 이미지 파일 Post 요청

데이터 전송에 있어서 HTTP 프로토콜을 사용한다면, 전송하는 데이터의 종류에 따라 적절한 인코딩 방식을 선택해서 사용하게 됩니다. 일반적으로 문자열이나 객체와 같은 구조화된 데이터를 전송하는 경우, JSON 인코딩을 사용하는 것이 일반적입니다. JSON은 데이터를 효율적으로 표현하고, 다양한 플랫폼 간 데이터를 쉽게 주고받을 수 있는 형식을 제공하기 때문에 널리 사용되는 방식입니다. 예를 들어, 서버에 사용자 정보를 전송하는 경우 다음과 같은 JSON 사용될 수 있습니다.

 

{
    "userName": "KIM JUNSU"
    "age": 36
    "email": "zzansu01@gmail.com"
}

 

이미지 파일이나 비디오 파일 같은 이진 데이터를 전송할 때는 JSON 인코딩이 적합하지 않은데요. 이진 데이터는 바이트 단위로 표현되고, 이를 텍스트 기반의 JSON 형식으로 변환하는 것은 비효율적이며 데이터 손실을 일으킬 수 있씁니다. 대신, 이러한 종류의 데이터를 전송할 때는 'multipart/form-data' 인코딩 방식을 주로 사용합니다. 이 방식을 사용하면 이진 파일을 그대로 전송할 수 있으며, 필요한 경우 텍스트 기반의 다른 데이터와 함께 복합적으로 전송할 수 있는 방법입니다.

 

multipart/form-data 사용 예시

저는 서버로 클라이언트에서 선택한 이미지 파일을 전송하려고 합니다. 이 파일을 서버로 전송한다고 했을 때 이렇게 사용할 수 있습니다.

 

const formData = new FormData();
this.uploadInfoImages.forEach((image) => formData.append('goodsInfoImages[]', image));
formData.append('goodsId', this.goods.id);

const headers = {
    headers: {
        'Content-Type': 'multipart/form-data',
    },
};

const goodsInfoImagesResponse = await axios.post('/api_server/request_address', formData, headers);

 

FormData 변수를 하나 만들어주고, 그 변수에 ImageFile을 추가해주고, 다른 데이터도 추가해줍니다. append 함수를 통해서 데이터의 이름과 데이터를 넣어주면 되는데요. append('데이터이름', 데이터) 이런 형식이 되겠죠?

 

그리고, 요청보낼 헤더에 Content-Type에 multipart/form-data 를 명시해줘서 서버가 이 요청의 데이터가 multipart formdata 라는 것을 알도록 해주고, 서버로 요청 보내면 됩니다.

 

Java SpringBoot 서버에서 multipart 데이터 받는 법

그럼 서버에서는 어떻게 이 데이터를 받을 수 있을까요? 저는 지금 프로젝트에서 자바 스프링부트를 서버 어플리케이션으로 사용하고 있기 때문에 스프링부트에서 받는 방법을 예시로 들겠습니다.

 

@PostMapping("/api_server/request_address")
public void addInfoImages(@RequestParam(name = "goodsInfoImages[]")List<MultipartFile> infoImageList,
                          @RequestParam(name = "goodsId")Long goodsId) throws Exception {
    log.debug("infoImageList : {}", infoImageList);
    log.debug("goodsId : {}", goodsId);
    goodsService.addInfoImages(infoImageList, goodsId);
}

 

요청을 받는 컨트롤러에서 @RequestParam의 이름에 아까 요청에서 작성한 데이터의 이름을 작성해주고, 파일의 경우는 MultipartFile 타입으로 받고, 각각의 데이터는 타입에 맞는 자료형의 변수로 데이터를 전달받을 수 있습니다.