Question

我正在尝试将图像上传到Froala编辑器中的服务器。但是无法加载上传的图像。编辑器返回以下错误：

http://localhost:8080/create-page/images/22952f64-3b5a-4cf4-8095-0a2fa3198819.jpeg 404（） {code: 1, message: "Image cannot be loaded from the passed link."}

并且响应未定义 - ＆gt; response: undefined

但是，这是一个正确的链接，当我点击它时，我可以在浏览器中打开图像。

我为froala编辑器提供了以下代码：

$('.text-editor').froalaEditor({
    /*theme: 'gray',
    zIndex: 2001,*/
    /*theme: 'dark',
    zIndex: 2003,*/
    theme: 'custom',
    charCounterCount: false,
    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', '|', 
'fontFamily', 'fontSize',
        'color', '|', 'align', 'outdent', 'indent', 'insertLink', 
'insertImage', 'embedly',
        '|', 'emoticons     ', 'specialCharacters', 'insertHR', 'selectAll', '|', 'spellChecker', 'undo', 'redo'],
    quickInsertTags: [],
    heightMin: 500,
    imageUploadURL: '/image/upload',
    imageMaxSize: 5 * 1024 * 1024,
    imageUploadMethod: 'POST',
    // Set the load images request URL.
    imageManagerLoadURL: "http://localhost:8080/",

    // Set the load images request type.
    imageManagerLoadMethod: "GET",
    /*imageUploadParams: {id: 'my_editor'}*/
})
.on('froalaEditor.contentChanged', function (e, editor) {
    console.log("Page content changed");

    var pageContent = $(this).find('.fr-view').html();
    var id = $('#pageId').text();

    var pageJson =  {"id": id, "pageContent": pageContent};
    console.log(pageJson);

    $.ajax({
        type: 'POST',
        url: '/page/edit',
        contentType: 'application/json',
        data: JSON.stringify(pageJson),
        dataType: 'json'

    }).done (function(data) {

        //console.log("page " + data.id + " was updated");

    }).fail (function(err) {
        console.error(err);
    });
})
.on('froalaEditor.image.error', function (e, editor, error, response) {
    // Bad link.
    if (error.code == 1) {
        console.log(error);
        console.log("response: " + response);
    }

    // No link in upload response.
    else if (error.code == 2) { 
        console.log(error);
    }

    // Error during image upload.
    else if (error.code == 3) { 
        console.log(error);
    }

    // Parsing response failed.
    else if (error.code == 4) { 
        console.log(error);
        console.log("response: " + response);
    }

    // Image too text-large.
    else if (error.code == 5) {
        console.log(error);
    }

    // Invalid image type.
    else if (error.code == 6) {
        console.log(error);
    }

    // Image can be uploaded only to same domain in IE 8 and IE 9.
    else if (error.code == 7) {
        console.log(error);
    }

    // Response contains the original server response to the request if available.
  });

对于服务器端，我使用Java Spring框架和以下代码上传图像：

public ImageLink upload(MultipartFile file, String baseUrl) {

    String linkName = null;
    String type = file.getContentType();
    type = type.substring(type.lastIndexOf("/") + 1);

    // Generate random name.
    String extension = type;
    extension = (extension != null && extension != "") ? "." + extension : extension;
    String name = UUID.randomUUID().toString() + extension;

    try {
        file.transferTo(resourceLoader.getResource("/create-page/images/" + name).getFile());

    } catch (Exception e) {
        e.printStackTrace();
    }

    logger.info(baseUrl);

    linkName = "images/" + name;
    ImageLink link = new ImageLink();
    link.setLink(linkName);

    logger.info(link.toString());

    return link;

}

所以，响应机构是这样的：

{
    "link": "images/97861510-5ca9-4d0d-968c-214ca771832a.png"
}

Froala似乎在添加http://localhost:8080/create-page，所以我将返回相对路径。我尝试了不同的变体，比如返回整个地址，但它仍然不起作用。

请指出我做错了什么。谢谢！

Answer 1

似乎服务器无法按时上传图像，因此froala在图像尚未准备好时正在发出请求。我添加了Thread.sleep（5000）;在将响应发送到客户端之前到控制器。不确定它是否是一个好的解决方案，但它解决了我的问题。

上传后Froala图片加载失败

1 个答案: