画像は正常にアップロードされていますが、元の画像がそのままの場合、大量のデータが消費されるため、可能な場合はサムネイルを作成して送信し、元の画像を表示しようとすると元のファイルが表示されます.(特に、リストページの画像が多くなるので注意が必要です.)

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

にアップロードされたファイルを保存し、サムネイルライブラリを使用してサムネイルファイルを作成します.

島のネイルアートファイルは、ファイルの先頭に「s」を付けて普通のファイルを区別します.

UploadResultDTOにgetThumbnail URL()を追加し、島の経路を<img>タグとして処理します.

サムネイルライブラリ

アイランドネイルを扱うためにjavaを使用します.imageioパッケージも使用できますが、プロジェクトはThumbnaillatorライブラリを使用します.

Thumbnaillatorはわずかなコードでサムネイルを作成し、横寸法と縦寸法を決定する際に比例して調整できる便利な機能を提供します.

Thumbnaillatorライブラリ:https://github.com/coobird/thumbnailator

build.gradeファイルにThumbnaillatorを追加します.

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();
            </--------------------------------------------/>
            }
        }

コードの変更処理は、3行程度、幅または深さ100 pxサイズのサムネイルを生成する.

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

で生成されたサムネイルは「s」で始まり、ファイルサイズは相対的に小さい.

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

生成された

サムネイルは、アップロードされたファイルと同名であるため、区別が難しくない.

JSONに送信されたUploadResultDTOには、getImgURL()などの島名のリンクを処理する方法が追加されています.

  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 "";
    }

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

なぜDTOでメソッドを定義するときにgetImageURL、getThumbnail URLとして定義されるのか、メソッドにアクセスするときにのみ定義されるのか.imageURLですか、thumbnail URLですか.

なぜvoid型ではなくString型を宣言し、「リターン価格として」与えたのでしょうか.

解決する

1.JSでは、getterはJavaで知っているものとは少し違います.
2.メソッドの前にgetキーワードを使用して定義します.(なぜgetで始まるのか)
3.メソッド名はクラスのプロパティとして使用できます.
4.パラメータは空で、パラメータを返す必要があります.(Stringタイプ、戻り理由は")

に追加されたgetThumbnail URL()はgetImageURL()とほぼ同じで、真ん中に「s」が追加されています.

UploadEx.コードを変更してhtmlにサムネイル画像を表示します.

  // 추가 
     // 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로 변경
        }
     }

上記のコード

によれば、ファイルアップロードの結果、以下のサムネイルのみが追加されたことがわかります.(アップロードされたファイルの画像の割合も自動的に調整されます.)