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

7752 ワード
Multipart テキストリンク
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
    簡単なHessianインタフェースの開発例
    [Clean Architecture]7章SRP:単一責任原則