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

Question

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

当我点击插件的 "Choose File" 按钮时，它会要求我打开一个文件。我从我的图片中选择了一些 .png 文件，插件显示了它下面图片的信息。

然后我按下我的 "Upload" 按钮，目前只需要首先显示上传的图片。

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-code 图片来源：

<img src="null">

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

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

Answer 1

您需要在 UploadField class 上调用 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 上测试。

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

Showing the uploaded image in Vaadin with EasyUploads

image

upload

vaadin

embedded-resource