サムネイル画像処理プロセス

サムネイルライブラリ

implementation group: 'net.coobird', name: 'thumbnailator', version: '0.4.14'

Upload Controller Thumbnaillatorのインポート後にtry-catchセクションが変更されます.

@RestController
@Log4j2
public class UploadController {

    @Value("${part4.upload.path}")  //application.properties의 변수
    private String uploadPath;


    @PostMapping("/uploadAjax")
    public ResponseEntity<List<UploadResultDTO>> uploadFile(MultipartFile[] uploadFiles) {

        List<UploadResultDTO> resultDTOList = new ArrayList<>();

        for (MultipartFile uploadFile : uploadFiles) {

            // 이미지 파일만 업로드 가능
            if(uploadFile.getContentType().startsWith("image") == false){
                // 이미지가 아닌경우 403 Forbidden 반환
                return new ResponseEntity<>(HttpStatus.FORBIDDEN);
            }

            // 실제 파일 이름 IE나 Edge는 전체 경로가 들어오므로
            String originalName = uploadFile.getOriginalFilename();

            String fileName = originalName.substring(originalName.lastIndexOf("\\") + 1);

            log.info("fileName: "+fileName);

            // 날짜 폴더 생성
            String folderPath = makeFolder();

            //UUID
            String uuid = UUID.randomUUID().toString();

            //저장할 파일 이름
            String saveName = uploadPath + File.separator + folderPath + File.separator + uuid +"_"+ fileName;

            Path savePath = Paths.get(saveName);
			<----------------수정할부분--------------->
            try {
                //원본 파일 저장
                uploadFile.transferTo(savePath);
                //섬네일 생성 (섬네일 파일 이름은 중간에 "s_"로 시작하도록)
                String thumbnailSaveName = uploadPath + File.separator + folderPath + File.separator
                        + "s_" + uuid + fileName;
                File thumbnailFile = new File(thumbnailSaveName);

                Thumbnailator.createThumbnail(savePath.toFile(), thumbnailFile,100,100);

                resultDTOList.add(new UploadResultDTO(fileName,uuid,folderPath));
            }catch (IOException e){
                e.printStackTrace();
            </--------------------------------------------/>
            }
        }

ブラウザからファイルをアップロードすると、次の図のように生成された元の画像がサムネイルファイルと同じになります.

ブラウザでのサムネイルの処理

  public String getImageURL(){    //추후에 전체 경로가 필요한 경우를 대비하여 생성
        try{
            return URLEncoder.encode(folderPath+"/"+uuid+"_"+fileName,"UTF-8");
        }catch (UnsupportedEncodingException e){
            e.printStackTrace();
        }
        return "";
    }
    public String getThumbnailURL(){
        try{
            return URLEncoder.encode(folderPath+"/s_"+uuid+"_"+fileName,"UTF-8");
        }catch (UnsupportedEncodingException e){
            e.printStackTrace();
        }
        return "";
    }

ここで疑問点についての知識を学びました

解決する

  // 추가 
     // Ajax 업로드 이후 이미지들을 호출하는 함수 
     function showUploadedImage(arr){

        console.log(arr);

        var divArea = $(".uploadResult");

        for(var i =0; i<arr.length; i++){
            divArea.append("<img src='/display?fileName=" + arr[i].thumbnailURL+"'>");
            //imageURL을 thumbnailURL로 변경
        }
     }