2017-12-21 1 views
2
내가 선택하고 파일에서 이미지를 읽을 다음 코드를 사용하고

등 :JSP, 자바 스크립트 : 디스플레이 바이트 [] 이미지

<div class="col-md-6 form-group"> 
<input type='file' name="image" onchange="readURL(this);" 
        class="form-control" /> 
<img id="userimg" src="#" alt="" /> 
</div> 

의 .js :

내 서블릿에서
function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#userimg') 
       .attr('src', e.target.result) 
       .width(150) 
       .height(200); 
     }; 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

나는 변환을 파일을 byte[] :

(request.getParameter("image")).getBytes() 

으로 변경하여 데이터베이스에 삽입하십시오.

그런 다음,이처럼 .jsp로 페이지에서 데이터베이스와 디스플레이에서 읽어보십시오

.jsp를

<div class="panel panel-success"> 
         <h2>Pictures</h2> 
         <% 
          List<byte[]> pics = PictureTable.getConcertPictures(concertBean.getId()); 
         %> 
         <% 
          for (byte[] p : pics) { 
           String encoded = ImageHelper.encodeImage(p); 
         %> 
         <img src="data:image/jpg;base64,<%=encoded%>"> 
         <% 
          } 
         %> 
    </div> 

ImageHelper.java :

public static String encodeImage(byte[] img) { 
     return Base64.encode(img); 
    } 

하지만, 이미지가 표시되지 않습니다 (뭔가가 데이터베이스에 삽입됩니다).

편집

:

.jsp로 :

<div class="comments"> 
       <div class="panel panel-success"> 
        <h2>Pictures</h2> 
        <% 
         List<byte[]> pics = PictureTable.getConcertPictures(concertBean.getId()); 
        %> 
        <% 
         for (byte[] p : pics) { 
          String encoded = ImageHelper.encodeImage(p); 
        %> 
        <img src="data:image/jpg;base64,<%=encoded%>"> 
        <% 
         } 
        %> 
       </div> 
       <!-- /container --> 
       <form 
        action="GalleryController?action=add_concert_picture&concertID=<%=concertBean.getId()%>" 
        method="post" class="panel panel-success" 
        enctype="multipart/form-data"> 
        <div class="col-md-6 form-group"> 
         <input type='file' name="image" class="form-control" /> 
        </div> 
        <button type="submit" class="btn">Submit</button> 
       </form> 
      </div> 

서블릿 :

Part filePart = request.getPart("image"); 
InputStream fileContent = filePart.getInputStream(); 
PictureTable.insertConcertPicture(cid, user.getUser().getId(), fileContent); 

PictureTable.java :

내 코드를 수정 한

public static void insertConcertPicture(int concertId, int userId, InputStream photo) { 
     try (Connection connection = ConnectionPool.getConnectionPool().checkOut()) { 

      PreparedStatement ps = connection 
        .prepareStatement("INSERT INTO concertphototable(ConcertId, UserId, Photo) VALUES(?,?,?)"); 

      ... 
      ps.setBinaryStream(3, photo); 

      ps.executeUpdate(); 

     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 

이미지가 여전히 올바르게 표시되지 않지만 페이지의 "제출"부분이 보이지 않습니다.

+2

Base64 인코딩이없는 응답에 직접 바이트를 쓰고 그 imple 태그 URL을 해당 서블릿에 직접 가리 키지 않는 이유는 무엇입니까? – tsolakp

+0

'Base64.getEncoder(). encode (img)'를 사용하면 어떻게됩니까? 또한 이미지가 JPEG로되어 있는지 확인 했습니까? – pyb

+1

@ pyb 확실히 JPG. 확인했는데 인코딩 된 것은 사진의 이름입니다. 나는'encode (img)'가 반환 한 것을 디코딩하고, 내 파일의 이름을 얻었다. – Eutherpy

답변

3

이렇게하는 방법에는 여러 가지가 있습니다. Base64 String을 반환하고 데이터베이스에 저장합니다. 그런 다음 JSP로 반환하여 렌더링 할 수 있습니다. uploadStatus 페이지로 다음

@PostMapping("/upload") 
public ModelAndView singleFileUpload(@RequestParam("image") String image, RedirectAttributes redir) { 
    jdbcTemplate.update("INSERT INTO concertphototable(ConcertId, UserId, Photo) VALUES(?, ?, ?)", 1, 1, image); 
    String imageString = jdbcTemplate.queryForObject("Select Photo from concertphototable where ConcertId = " + 1, 
      String.class); 
    ModelAndView modelAndView = new ModelAndView(); 
    modelAndView.setViewName("redirect:uploadStatus"); 
    redir.addFlashAttribute("image", imageString); 
    return modelAndView; 
} 

그리고 :

<input type="file" name="file" onchange="encodeImageFileAsURL(this)" /> 
<form method="POST" action="/upload"> 
    <input id="image" type="text" name="image" value="asdf" /><br /> 
    <br /> <input type="submit" value="Submit" /> 
</form> 
<script type="text/javascript"> 
    function encodeImageFileAsURL(element) { 
     var file = element.files[0]; 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      document.getElementById("image").value = reader.result; 
     } 
     reader.readAsDataURL(file); 
    } 
</script> 
당신의/업로드 컨트롤러에서

:

<img src=${image}> 

혼동하지 마세요

은 당신이 한이 작업을 수행하려면 스프링 부분의 경우 jsp에서 server로 base64 String을 게시 한 다음 저장해야한다는 것을 명심해야합니다. 그런 다음 문자열로 검색하여 이미지 src 태그의 jsp로 전달하면 이미지가 표시됩니다. 이미지를 blob로 데이터베이스에 저장해야하는 특별한 이유가 없으면 위의 방법으로 가야합니다.

1

일부 문제는 기술적이며 일부는 방법론과 관련 있다고 생각합니다. 저의 대답은 주로 방법론에 중점을 둡니다.

JavaScript 클라이언트 및 C# Web API 서버와 비슷한 기능을 수행했습니다. 우리는 데이터가 변환되는 각 지점에서 오류를 신속하게 찾아 내고 격리 할 수있는 매우 간단한 개발/검증 모델 (아래)을 채택했습니다.

처음에는 우리가 겪고있는 것처럼 보이는 많은 문제로 어려움을 겪었습니다. 우리가 어떻게 문제를 해결했는지는 당신에게 도움이 될 수 있습니다.

사용자 tsolakp가 좋은 지적입니다. 바이트 데이터를 직접 반환하는 것을 고려해야합니다. 클라이언트에서 서버로 바이너리로 갈 예정이라면 다운로드 데이터에 대해서도 진지하게 고려해 보길 권합니다. 우리는 대부분의 데이터에 바이너리 업로드/다운로드를 사용합니다. 요즘 유행하지는 않지만 우리 시스템에서는 훨씬 더 효율적입니다.

당신이 언급 한 :

SRC = "데이터 : 이미지/JPG, Base64로,/9J/4AAQSkZJRgABAQEAAAAAAAD/4Zf2RXhpZgAATU0AKgAAAAg ...이 이 veeeeeeery 오랫동안 계속

즉. 인간이 쉽게 읽고/확인할 수있는 매우 작은 JPEG를 생성하고 업로드 및 다운로드 흐름을 점진적으로 확인하는 데 사용하는 것이 좋습니다.

다음 코드 흐름을 사용했습니다. javascript 클라이언트는 바이너리 데이터를 업로드합니다.

var byte[] = atob(jpeg string); 
 
var xhr = new XMLHttpRequest(); 
 
xhr.open... 
 
xhr.onload... 
 
xhr.setRequestHeader("Content-type", "application/octet-stream"); 
 
xhr.send(new Uint8Array(byte[]));

우리는 매우 적은 JPEG를 사용 (예를 들면, 5x10px) 쉽지 데이터 플로우의 각 단계에서 확인 하였다되도록.

  1. jpeg 문자열을 byte []로 변환 한 다음 다시 문자열로 변환하고 모든 것이 올바르게 작동하는지 확인하십시오.

  2. 위의 HTTP 코드에서 알 수 있듯이 JavaScript 바이트 []를 서버로 전송하기 위해 Uint8Array (byte [])로 변환해야했습니다. 서버로 전송하기 전에 byte []로 변환 한 다음 jpeg 문자열 형식으로 변환하여이 지점으로가는 전체 흐름을 확인했습니다. 우리는이 작은 조각들로 흘러가는 흐름을 깨서 식별하기 쉬운 두 가지 문제를 발견했습니다.

  3. 일단 여기까지 가면 클라이언트 - 서버 통신이 추가됩니다. 서버에 도착하자마자 서버의 바이너리 데이터가 2 단계에서 추출한 클라이언트 데이터와 일치하는지 확인했습니다.

  4. 서버에 데이터를 저장하기 전에 업로드 된 데이터를 클라이언트에 반환하여 다시 확인했습니다. 그것은 각 포인트에서 동일했고 제대로 디코딩 될 수있었습니다. 여기에 몇 가지 문제점을 발견하고 미디어 변환기의 필요성을 확인했습니다 (Java 문제는 다를 수 있음).

  5. 마지막으로 데이터가이 시점까지 확인되면 시스템 데이터 저장 프로세스를 단계별로 수행했습니다.

데이터를 서버로 보내고 검색하기 위해 점진적인 단계를 거쳐 6 ~ 7 가지 문제가있었습니다. 처음에는 전체적인 작업을 수행하고 벽을 쳤습니다.그래서 우리는 조각 식사 개발/검증 과정으로 전환했습니다. 내 2 센트 가치.

당신은 아마 당신이 여기에 언급 된 문제를 해결하는 데 도움이 될 것입니다 아래로 문제를 깰 경우

을하지만 이미지가 제대로 표시되지 않습니다 (무언가가 데이터베이스에 삽입 얻을 않습니다).

모든 것이 데이터 경로를 따라 매우 중요합니다.

귀하의 시스템에 다운로드 코드가 다르다는 것을 알고 있지만, 문제를 더 작은 조각으로 분해하지 않으면 쉽게 마스크 처리되는 오류가 발생할 수있는 일련의 단계가 있음을 설명하기 위해 우리의 것을 포함 시켰습니다 .

var xhr = new XMLHttpRequest(); 
 
xhr.open... 
 
    xhr.responseType = "arraybuffer"; 
 
xhr.onload... =() => { 
 
    if (xhr.status === 200) { 
 
     var arrayBuffer = xhr.response; 
 
     var unsigned8Int = new Uint8Array(arrayBuffer); 
 
     // Here we had to convert the unsigned8bit array back to a JavaScript array. 
 
     // Then convert js byte[] to a string and prepend the image header as 
 
     // you are doing in your code. 
 
     // 
 
     // The last step was to prepend the image header as you are doing, but 
 
     // we used binary to asci. 
 
     var data = "data:image/jpeg;base64," + btoa(byte[]); 
 

 
    }; 
 
    xhr.setRequestHeader("Content-type", "application/octet-stream"); 
 
    xhr.send();

내가 년간의 숫자에 자바를 사용하지 않은,하지만 난 실제 설계에 관련이있을 수있는 몇 가지 기술적 인 정보를 끄집어 수 있는지가 표시됩니다.

관련 문제