Question

我想在上传新的个人资料图片后更新一个graphicImage。

<h:panelGroup id="profileImage" layout="block">
                <p:graphicImage id="myImage" cache="false" value="#{myProfile.usersProfileImage}" />    
                <p:fileUpload fileUploadListener="#{myProfile.fileUploadListener}"
                    mode="advanced" auto="true" sizeLimit="100000"
                    update="profileImage"
                    allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
                <pe:imageAreaSelect id="imageCropper" for="myImage" hide="false"
                    imageHeight="250" imageWidth="250" aspectRatio="1:1">
                    <p:ajax event="selectEnd"
                        listener="#{myProfile.selectEndListener}" />
                </pe:imageAreaSelect>
            </h:panelGroup>

在我的支持豆

中

public void fileUploadListener(FileUploadEvent event) {

        try {
            BufferedImage image = ImageIO
                    .read(event.getFile().getInputstream());
            if (image != null) {
                ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
                ImageIO.write(image, "jpg", outputStream);
                user.setProfileJpegImage(outputStream.toByteArray());
            } else {
                throw new IOException("FAILED TO CONVERT PICTURE");
            }
        } catch (IOException e) {
            throw new IllegalStateException(e);
        }
    }

我不知道为什么但是图片没有更新。如果我用f5刷新页面，图像会更新。我也尝试更新=“myImage”但它既不工作

Answer 1

在PrimeFaces论坛上多次讨论。这是一个错误，它已经在精英版本中修复了，并且用于上升5.0

Answer 2

目前还没有针对此错误的修复程序，但存在一些解决方法。另见this Thread. 此线程中的变通方法建议通过Javascript或通过辅助bean将随机参数附加到images src 属性。这会强制浏览器重新加载图像。

如果您使用的是 fileUpload ，请将您的JS-Code插入 oncomplete 属性。

Answer 3

我因这个问题而迷失了很多次，以至于我决定彻底改变我的工作方式。我使用AWS S3文件系统托管图像。我在那里上载并将信息保存在数据库中，例如originalFileName，MimeType，newFileName，bucketName等。每个文件都有一个数据库对象。我没有问题就上传了。上传文件后，我强制重定向以更新文件：

NavigationHandler handler = FacesContext.getCurrentInstance().getApplication().getNavigationHandler();
handler.handleNavigation(FacesContext.getCurrentInstance(), null, "/dashboard?faces-redirect=true");
FacesContext.getCurrentInstance().renderResponse();

我通过以下方式查看文件：

<p:graphicImage value="#{userImageFileBean.endereco}"
                                    title="#{userImageFileBean.userImageFile.title}" 
                                    alt="#{userImageFileBean.userImageFile.alt}" 
                                    />

userImageFileBean endereco方法返回带有文件S3地址的String。 S3存储桶应具有只读策略。如果您建立的地址仅使用ID和其他常用词，则任何人都可以下载您的所有文件。为了解决这种问题，您可以根据UUID来创建地址和名称文件，这很难发现。希望我能帮您解决让我起床两个星期的问题。

上传后更新graphicImage

3 个答案: