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

【问题标题】：Showing the uploaded image in Vaadin with EasyUploads使用 EasyUploads 在 Vaadin 中显示上传的图像
【发布时间】：2015-04-03 08:03:48
【问题描述】：

我正在尝试将EasyUploads-addon 用于 Vaadin，但无法显示图像。

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

image = 我使用设计器在布局中绘制的嵌入式组件。

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

来自页面来源的图像的 HTML 代码：

&lt;img src="null"&gt;

这可能真的是微不足道的案例，但我发现的所有示例都超过 3-4 年，看起来没有帮助。

谁能告诉我，应该怎么做？

【问题讨论】：

您的代码无法编译。您需要将 byte[] 数据设为最终数据。

标签： image upload vaadin embedded-resource

【解决方案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);
}

生成（选择 .png 文件后）：

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

【讨论】：