JSF 2.2 和 Primefaces 4.0：文件上传后刷新图像

Question

在我的应用程序中，我使用 JSF2.2 和 Primefaces 4.0。我有一个上传新图像并需要更新现有图像的功能。有时在上传新图片后，旧图片可能仍然显示，这可能是由于缓存或重新渲染问题而发生的。我可以看到这种情况尤其常见于 2500x1600 等高分辨率图像。这可以在 IE、Chrome 和 Firefox 中重现。这是我的 Primefaces 组件：

<h:panelGroup id="mr-img-panel">
    <h:outputLink id="mr-image-link" target="_blank" process="@this"
                  value="#{myBean.image}"
                  rendered="#{myBean.image ne null}">
        <p:graphicImage id="mr-image" value="#{myBean.image}"
                        cache="false"
                        title="Title" styleClass="image-preview" />
    </h:outputLink>
</h:panelGroup>

<h:panelGroup styleClass="upload-view">
    <p:fileUpload id="mr-upload"
                  fileUploadListener="#{myBean.handleFileUpload}"
                  mode="advanced"
                  auto="true"
                  label="Upload new image"
                  dragDropSupport="true"
                  invalidFileMessage="#{msg['msg.invalid.filetype']}"
                  messageTemplate=" "
                  invalidSizeMessage="#{msg['msg.invalid.filesize']}"
                  update="mr-upload-messages, mr-img-panel"
                  sizeLimit="2097152"
                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                  styleClass="upload-view-button"
                  oncomplete="setTimeout(function() { $('[id$=mr-upload-messages]').hide(1000); }, 2000);">
        <f:attribute name="someId" value="#{some.id}" />
    </p:fileUpload>

    <p:messages id="mr-upload-messages" showDetail="true" showSummary="false" closable="true"/>

一开始还以为是缓存问题，所以写了一个缓存控制监听器：

public class CacheControlPhaseListener implements PhaseListener {


    @Override
    public void afterPhase(final PhaseEvent event) {

    }

    @Override
    public void beforePhase(final PhaseEvent event) {
        final FacesContext facesContext = event.getFacesContext();
        final HttpServletResponse response = (HttpServletResponse) facesContext
                .getExternalContext().getResponse();
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
        response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
        // some date in the past
        response.setDateHeader("Expires", 0); // Proxies.
    }

    @Override
    public PhaseId getPhaseId() {
        return PhaseId.RENDER_RESPONSE;
    }
}

但这并没有帮助。我尝试了几种不同的技术，其中一些我遇到了问题，在HERE 中进行了描述。正如SOLUTION 中所说，我写了这个 FileUploadRenderer：

public class CustomFileUploadRenderer extends FileUploadRenderer {

    @Override
    public void decode(final FacesContext context, final UIComponent component) {
        if (context.getExternalContext().getRequestContentType().toLowerCase().startsWith("multipart/")) {
            super.decode(context, component);
        }
    }
}

这是我为这些类添加到 faces-config.xml 的内容：

<lifecycle>
    <phase-listener id="nocache">com.example.CacheControlPhaseListener</phase-listener>
</lifecycle>

<render-kit>
    <renderer>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.FileUploadRenderer</renderer-type>
        <renderer-class>com.example.CustomFileUploadRenderer</renderer-class>
    </renderer>
</render-kit>

但问题依然存在。上传新图后，旧图没有通过ajax刷新，刷新页面后才能看到。

Answer 1

如果有人需要这个，看来更新到 Primefaces 5.0 已经为我解决了这个问题。