使用EasyUploads顯示Vaadin上傳的圖像

Question

我正在嘗試使用Vaadin的EasyUploads-addon，但無法顯示圖像。

當我點擊插件的「選​​擇文件」按鈕，它會問我打開一個文件。我從我的圖像中選擇一些.png文件，插件顯示它下面的圖片信息。

然後我按下我的「上傳」按鈕，它目前只需要顯示上傳的圖像。

private void showUploadedImage() { 
    Object value = upload.getValue(); 
    byte[] data = (byte[]) value; 

    StreamResource resource = new StreamResource(
      new StreamResource.StreamSource() { 
       private static final long serialVersionUID = 1L; 

       @Override 
       public InputStream getStream() { 
        return new ByteArrayInputStream(data); 
       } 
      }, "filename.png"); 

    image.setVisible(true); 
    image.setCaption("Uploaded image"); 
    image.setSource(resource); 
} 

上傳=這是用來選擇文件

圖像=我已經與設計師到我的佈局繪製嵌入式組件EasyUpload的組成部分。

但是，當我用瀏覽器查看頁面時，圖像不顯示。圖像只顯示爲根本沒有圖像，只會顯示標題。

的圖像從網頁的HTML源代碼：

<img src="null">

這可能是非常無聊的情況下，但我發現超過3-4歲的所有例子和看起來沒有幫助。

有人可以告訴我，它應該怎麼做？

Answer 1

你需要調用UploadField類二傳手：

uploadField.setFieldType(FieldType.BYTE_ARRAY); 

工作SSCCE：

@Override 
protected void init(VaadinRequest request) { 
    setContent(layout); 
    final UploadField uploadField = new UploadField(); 
    uploadField.setAcceptFilter(".png"); 
    uploadField.setFieldType(FieldType.BYTE_ARRAY); 
    uploadField.addListener(new Listener(){ 
     @Override 
     public void componentEvent(Event event) 
     { 
      showUploadedImage(uploadField); 
     } 
    }); 
    layout.addComponent(uploadField); 
    layout.addComponent(image); 
} 

private void showUploadedImage(UploadField upload) { 
    Object value = upload.getValue(); 
    final byte[] data = (byte[]) value; 

    StreamResource resource = new StreamResource(
      new StreamResource.StreamSource() { 
       @Override 
       public InputStream getStream() { 
        return new ByteArrayInputStream(data); 
       } 
      }, "filename.png"); 

    image.setSource(resource); 
} 

可生產（選擇.png文件後）：

當然，你可能想要將uploadField監聽器的類型更改爲更具體的監聽器。 測試Java 8，Vaadin 7.4.1，Eclipse Luna。