GWT客户端图像上传和预览

Question

我正在使用GWT，并且我想上传图像并显示其预览而不与服务器进行交互，因此gwtupload lib看起来并不可行。

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

是否有任何简便的方法可以通过GWT或JSNI进行？

Answer 1

此文档回答了您的问题：

Reading files in JavaScript using the File APIs

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

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

}-*/;