GWT 客户端图片上传和预览

Posted 2023-02-16

【中文标题】GWT 客户端图片上传和预览

【英文标题】：GWT client-side image upload & preview

【发布时间】：2014-05-29 23:54:51

【问题描述】：

我正在使用 GWT，我想在不与服务器交互的情况下上传图像并显示其预览，因此 gwtupload 库看起来不太可行。

图片上传并显示后，用户可以选择保存。想法是通过 GWT-RPC 将图像作为 Base64 编码的字符串发送，最后将其作为 CLOB 存储在数据库中。

是否有任何简单的方法可以使用 GWT 或使用 JSNI？

【参考方案1】：

本文档回答了您的问题：

Reading files in javascript using the File APIs

【讨论】：

抱歉回复晚了。 :)

【参考方案2】：

/**
 * This is a native JS method that utilizes FileReader in order to read an image from the local file system.
 * 
 * @param event A native event from the FileUploader widget. It is needed in order to access FileUploader itself.    * 
 * @return The result will contain the image data encoded as a data URL.
 * 
 * @author Dušan Eremić
 */
private native String loadImage(NativeEvent event) /*-

    var image = event.target.files[0];

    // Check if file is an image
    if (image.type.match('image.*')) 

        var reader = new FileReader();
        reader.onload = function(e) 
            // Call-back Java method when done
            imageLoaded(e.target.result);
        

        // Start reading the image
        reader.readAsDataURL(image);
    
-*/;

在 imageLoaded 方法中，您可以执行类似 logoPreview.add(new Image(imageSrc)) 的操作，其中 imageSrc 是 loadImage 方法的结果。

FileUpload 小部件的处理程序方法如下所示：

/**
 * Handler for Logo image upload.
 */
@UiHandler("logoUpload")
void logoSelected(ChangeEvent e) 
    if (logoUpload.getFilename() != null && !logoUpload.getFilename().isEmpty()) 
        loadImage(e.getNativeEvent());
    

【讨论】：

imageLoaded 函数在哪里

没有 imageLoaded(e.target.result);方法。此外，我尝试了这个，但它从未到达 reader.onload。我知道我的图像很好，因为我能够获取它们并将它们保存在服务器上并返回并渲染。我只需要一种在图像到达服务器之前渲染图像的方法

【参考方案3】：

假设您有 camera 属性，它是 FileUploader 的一个实例，请执行以下操作：

camera.getElement().setAttribute("accept", "image/*");
camera.getElement().setAttribute("capture", "camera");
camera.getElement().setClassName("camera");

并让 imgPreview 一个 Image 实例，执行以下操作。

imgPreview.getElement().setAttribute("id", "camera-preview");
imgPreview.getElement().setAttribute("src", "#");
imgPreview.getElement().setAttribute("alt", "#");

现在在相机对象上添加一个处理程序，该处理程序调用本机方法 test1(NativeEvent)

camera.addChangeHandler( e-> 
            test1(e.getNativeEvent());
        );

public static native void test1(NativeEvent event) /*-

        var image = event.target.files[0];

        var reader = new FileReader();
        reader.onload = function(e) 
           $wnd.$('#camera-preview').attr('src', e.target.result);
        

        // Start reading the image
        reader.readAsDataURL(image);

-*/;