用EasyUploads在Vaadin中显示上传的图像

Question

我正在尝试为Vaadin使用EasyUploads插件，但无法显示图像。

当我点击插件的“选择文件”按钮时，它会要求我打开一个文件。我从我的图片中选择了一些.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);
}

upload=EasyUpload用于选择文件的组件

图像=我与设计师一起绘制到布局中的嵌入组件。

但当我用浏览器查看页面时，图像没有显示。图像只是显示，因为根本没有图像，只会显示标题。

页面源中图像的HTML代码：

<img src="null">

这可能是一个非常琐碎的案例，但是我找到的所有例子都超过3-4年了，看起来没有帮助。

有人能告诉我该怎么做吗？

Answer 1

您需要在UploadField类上调用setter：

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);
}

当然，您可能希望将uploadField侦听器的类型更改为更具体的类型。在Java 8、Vaadin 7.4.1和Eclipse Luna上测试。