在p：graphicImage中顯示p：fileupload圖像而不保存

Question

我使用PrimeFaces 5.3 <p:fileUpload>來上傳PNG圖像，我想在保存到數據庫之前在<p:graphicImage>中顯示它的預覽。

這裏的一個MCVE：

<h:form enctype="multipart/form-data"> 
    <p:fileUpload value="#{bean.uploadedFile}" mode="simple" /> 
    <p:graphicImage value="#{bean.image}" /> 
    <p:commandButton action="#{bean.preview}" ajax="false" value="Preview" /> 
</h:form> 

private UploadedFile uploadedFile; 

public UploadedFile getUploadedFile() { 
    return uploadedFile; 
} 

public void setUploadedFile(UploadedFile uploadedFile) { 
    this.uploadedFile = uploadedFile; 
} 

public void preview() { 
    // NOOP for now. 
} 

public StreamedContent getImage() { 
    if (uploadedFile == null) { 
     return new DefaultStreamedContent(); 
    } else { 
     return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()), "image/png"); 
    } 
} 

發生在背襯豆沒有錯誤，並且圖像將不會被加載和顯示在前端。客戶提到該圖像返回了404未找到的錯誤。

Answer 1

你的問題是雙重的。它失敗了，因爲上傳的文件內容是請求作用域，並且因爲圖像是在不同的HTTP請求中請求的。爲了更好地理解內部工作，請仔細閱讀以下密切相關的Q &一個答案：

• Display dynamic image from database with p:graphicImage and StreamedContent
• How to choose the right bean scope?

爲了解決第一個問題，你需要閱讀上傳的文件內容立即中與表單提交相關的操作方法。在您的具體情況下，這看起來像：

private UploadedFile uploadedFile; 
private byte[] fileContents; 

public void preview() { 
    fileContents = uploadedFile.getContents(); 
} 

// ... 

要解決第二個問題，最好的辦法是使用數據URI方案。這使得直接以相同的響應呈現圖像成爲可能，因此您可以安全地使用Bean，而不必面對「上下文無效」問題或將會話或磁盤中的byte[]保存，以便在不同的請求中爲圖像提供服務。 Browser support on data URI scheme目前相當不錯。下面更換整個<p:graphicImage>：

<ui:fragment rendered="#{not empty bean.uploadedFile}"> 
    <img src="data:image/png;base64,#{bean.imageContentsAsBase64}" /> 
</ui:fragment> 

public String getImageContentsAsBase64() { 
    return Base64.getEncoder().encodeToString(imageContents); 
} 

注：我認爲Java的8提供給您的java.util.Base64在該版本只介紹。如果您使用的是較舊的Java版本，請改爲使用DatatypeConverter.printBase64Binary(imageContents)。

如果你碰巧使用JSF工具庫OmniFaces，你也可以只使用其<o:graphicImage>組件，而不是這是對違背<p:graphicImage>能夠直接引用byte[]和InputStream bean屬性和渲染數據URI。

<o:graphicImage value="#{bean.imageContents}" dataURI="true" rendered="#{not empty bean.imageContents}">