사진 리스트 업로드

후에 있을 상품 정보 수정을 감안하여 itemImgDtoList가 비어있다는 조건 하에 본 div를 불러옵니다

th:if="${#lists.isEmpty(itemFormDto.itemImgDtoList)}"

또한 제출시 enctype을 활용함으로써 서버에 제출하는 방법을 지정합니다.

<form role="form" method="post" enctype="multipart/form-data" th:object="${itemFormDto}">

제공된 코드 스니펫에서는 enctype="multipart/form-data"가 사용됩니다.

이 인코딩은 파일업로드 또는 이진 데이터가 포함된 경우에 사용됩니다. 

enctype 속성이 "multipart/form-data"로 설정되면 양식 데이터가 인코딩되고 각각 별도의 양식 필드 또는 파일을 포함하는 일련의 부분으로 패키징됩니다.이 인코딩을 사용하면 양식 제출의 일부로 이미지, 비디오 또는 기타 파일 형식과 같은 이진 데이터를 전송 할 수 있습니다.

 

아이템 저장 버튼을 누르면 ItemController로 넘어갑니다

 

public String itemNew(@Valid ItemFormDto itemFormDto, BindingResult bindingResult, 
	Model model, @RequestParam("itemImgFile") List<MultipartFile> itemImgFileList)

@RequestParam 주석은 이름이 "itemImgFile"인 HTML 파일 입력 요소를 사용하여 업로드된 파일을 나타냅니다.

업로드된 파일을 나타내기 위해 Spring MVC에서 제공하는 MultipartFile 개체 목록을 기대합니다. 

itemImgFileList 매개 변수에는 양식 제출의 일부로 전송된 업로드된파일이 포함됩니다.

 

 

if (itemImgFileList.get(0).isEmpty() && itemFormDto.getId() == null) {
    model.addAttribute("errorMessage", "첫번째 상품 이미지는 필수 입력 값입니다.");
    return "item/itemForm";
}

첫번째 아이템 이미지가 비어있다면 재입력을 요청합니다.

 

 

ItemService로 넘어가서 이지지파일 리스트의  첫번째 사진을 대표사진으로 지정합니다.

 

그 다음 중요한 것은 이미지 파일의 세부 저장 정보입니다.

위 코드에서 보다시피 ItemImg에 item을 삽입하고

이 ItemImg와 사진 파일을 itemImgService로 넘깁니다.

 

ItemImgService의 saveItemImg 메소드를 통해 파일 업로드와 상품 이미지 정보를 저장합니다.

@Value("${itemImgLocation})")을 통해 항목 이미지가 저장될 디렉토리를 나타냅니다

${itemImgLocation} 정보는 application.properties에 설정해놓습니다.

 

 

//파일 업로드
if (!StringUtils.isEmpty(oriImgName)) {
    imgName = fileService.uploadFile(itemImgLocation, oriImgName, itemImgFile.getBytes());
    imgUrl = "/images/item/" + imgName;
}

파일업로드 부분입니다.

fileService를 통해 아이템 저장 장소와 아이템이름, getBytes()를 넘겨주는데

getBytes() 메서드는 MultipartFile클래스에서 제공하며 업로드된 파일의 내용을 바이트 배열로 가져오는데 사용됩니다.

다시말해 uploadFile 메서드로 원하는 위치에 저장할 수 있도록 MultipartFile개체에서 원시파일 데이터를 추출하는데 사용됩니다.

 

그럼 이제 fileService클래스의 uploadFile을 확인해보겠습니다.

FileService . uploadFile

 

UUID.randomUUID

이 코드는 업로드 된 파일의 고유한 파일 이름을 만들기 위해 사용됩니다.

예를 들어 원본의 파일이름이 청바지인 2개의 파일이 존재할 떄 두개의 파일은 서버에 올라갈때 

덮어쓰기를 방지하고 중복을 피하기 위해 서로 다른 이름으로 저장되어야 하기때문입니다.

String extension = originalFileName.substring(originalFileName.lastIndexOf("."));

확장자를 추출하고

String savedFileName = uuid.toString() + extension;

고유식별자와 확장자를 더합니다.

String fileUploadFullUrl = uploadPath + "/" + savedFileName;

저장 경로와 파일 이름을 합해줍니다.

 

FileOutputStream fos = new FileOutputStream(fileUploadFullUrl);
fos.write(fileData);

FileOutputStream을 생성하여 파일 저장 위치를 지정하고 

fos.write를 통해 fileData 바이트 배열을 FileOutputStream에 기록하여 파일을 지정된 위치에 효과적으로 저장합니다

 

고유식별자 + 확장자로 지정한 장소에 저장되는 것을 확인할 수 있습니다.

 

그리고 fos.close()를 통해 FileOutputStream을 닫고

return savedFileName으로 저장된 파일 이름을 반환합니다..

//파일 업로드
if (!StringUtils.isEmpty(oriImgName)) {
    imgName = fileService.uploadFile(itemImgLocation, oriImgName, itemImgFile.getBytes());
    imgUrl = "/images/item/" + imgName;
}

 

그럼 다시 itemImgService로 넘어와서 반환 받은 값을 imgName에 삽입합니다.

그리고 imgurl을 지정해줍니다.

 

//상품 이미지 정보 저장
itemImg.updateItemImg(oriImgName, imgName, imgUrl);
itemImgRepository.save(itemImg);

마무리로 파일과 관련된 정보를 DB에 저장해줍니다.