上传后更新graphicImage

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刷新页面，图像就会更新。我也试着用update="myImage“，但两者都不起作用。

Answer 1

在PrimeFaces论坛上讨论了很多次。这是一个bug，在精英版和升级5.0版中都是固定的

Answer 2

目前还没有修复此错误的方法，但存在一些解决办法。还请参见这条线。这个线程中的变通方法，即通过Javascript或通过后台bean向图像src属性添加一个随机参数。这迫使浏览器重新加载图像。

如果使用的是fileUpload，那么将JS插入到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地址的字符串。S3桶应该有一个只读策略。如果您构建的地址只使用ids和其他常用单词，任何人都可以下载您的所有文件。为了解决这类问题，您可以基于UUID创建地址和名称文件，这是很难发现的。我希望我能帮你解决这个问题，让我在床上躺了两个星期。