出力[SPRING]アップロード画像-(3)

JSONに戻ったアップロード結果を画面で確認!

ブラウザに<img>タグ、

をリンクで追加する必要がある.

サーバは、このURLを呼び出すときに画像ファイルデータをブラウザに送信する必要がある.

これらのタスクを処理するために、Upload Controllerは「/表示?filename=xxx」などのURLを呼び出したときに画像を送信する方法を追加します.

/** 업로드 이미지 출력하기
     */
    @GetMapping("/display")
    public ResponseEntity<byte[]> getFile(String fileName){

        ResponseEntity<byte[]> result = null;

        try{
            String srcFileName = URLDecoder.decode(fileName,"UTF-8");
            log.info("filename : "+srcFileName);
            File file = new File(uploadPath + File.separator + srcFileName);
            log.info("file : "+file);
            HttpHeaders header = new HttpHeaders();

            //MIME 타입 처리
            header.add("Content-Type", Files.probeContentType(file.toPath()));
            //File객체를 Path로 변환하여 MIME 타입을 판단하여 HTTPHeaders의 Content-Type에  값으로 들어갑니다.

            //파일 데이터 처리 *FileCopyUtils.copy 아래에 정리
            //new ResponseEntity(body,header,status)
            result = new ResponseEntity<>(FileCopyUtils.copyToByteArray(file),header,HttpStatus.OK);
            
        }catch (Exception e){
            log.error(e.getMessage());
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
        return result;

追加されたgetFile()メソッドは、URL符号化されたファイル名をパラメータとして受信し、byte[]としてブラウザにファイルを送信します.

ファイル拡張子は、ブラウザに送信されるMIMEタイプを決定します.probeContentType()はファイルデータを処理し、FILECopyUtilsはファイルデータを処理する.

ブラウザはアップロードの結果にimageURL属性を含めます.(UploadResultDTOのgetImpageURL()

imageURLは、URL符号化されたファイルパスとUUIDなどの情報とを組み合わせた情報であるため、<img>タグを作成するために使用することができる.

uploadEx.htmlは、アップロードされた画像を表示するために<div>を追加する.

showUploadedImages()関数を作成し、Ajaxアップロード後にこれらの画像を呼び出します.
Ajax呼び出し成功後'/display?filename=xxxを呼び出します.

Ajax呼び出し部は次のようになります.

これで、ブラウザの処理が完了すると、画面でファイルを選択し、アップロード後にブラウザでアップロードしたファイルを再度表示できます.

ブラウザの処理が完了したら、画面ファイルを選択し、アップロード後にブラウザでアップロードしたファイルを再参照できます.

*FileCopyUtils.copy