web移动端富文本编辑器artEditor使用(后台springboot)

时间:2024-04-08 09:59:36

文本编辑器artEditor的gitHub地址:https://github.com/baixuexiyang/artEditor

在web端,集成好了artEditor,但是上传时,总是上传不成功:

原先后台代码:

web移动端富文本编辑器artEditor使用(后台springboot)

前端代码:

web移动端富文本编辑器artEditor使用(后台springboot)

总是报错;后台显示上传文件为空,原来自己想当然是传的文件....

正确代码(前端把图片转成base64编码,再给后台):

后台:

@PostMapping("/base64Upload")
public String aa(String image){
    System.out.println("上传图片==");
    System.out.println("上传图片=="+image);
    return image;
}

前端:

$(function () {
    "use strict";
    $('#content').artEditor({
        imgTar: '#imageUpload',
        limitSize: 5,   // 兆
        showServer: true,
        uploadUrl: 'http://xxx/image/base64Upload',
        data: {},
        uploadField: 'image',
        breaks: false,
        placeholader: '请输入文章正文内容',
        validHtml: ["<br/>"],
        formInputId: 'target',
          beforeUpload: function(imgBase64) {
              alert("处理完之后,必须return图片数据"+imgBase64);
            // 处理完之后,必须return图片数据   
            return imgBase64;       
          },

        uploadSuccess: function (res) {
            // 这里是处理返回数据业务逻辑的地方
            // `res`为服务器返回`status==200`的`response`
            // 如果这里`return <path>`将会以`<img src='path'>`的形式插入到页面
            // 如果发现`res`不符合业务逻辑
            // 比如后台告诉你这张图片不对劲
            // 麻烦返回 `false`
            // 当然如果`showServer==false`
            // 无所谓咯
            return res;
        },
        uploadError: function (status, error) {
            //这里做上传失败的操作
            //也就是http返回码非200的时候
            alert('网络异常' + status)
        }
    });
});