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

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

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

原先后台代码：

前端代码：

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

正确代码(前端把图片转成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: ["
"],
        formInputId: 'target',
          beforeUpload: function(imgBase64) {
              alert("处理完之后，必须return图片数据"+imgBase64);
            // 处理完之后，必须return图片数据   
            return imgBase64;       
          },
        uploadSuccess: function (res) {
            // 这里是处理返回数据业务逻辑的地方
            // `res`为服务器返回`status==200`的`response`
            // 如果这里`return `将会以``的形式插入到页面
            // 如果发现`res`不符合业务逻辑
            // 比如后台告诉你这张图片不对劲
            // 麻烦返回 `false`
            // 当然如果`showServer==false`
            // 无所谓咯
            return res;
        },
        uploadError: function (status, error) {
            //这里做上传失败的操作
            //也就是http返回码非200的时候
            alert('网络异常' + status)
        }
    });
});
注意事项：后台参数image要和前端参数uploadField：“image”对应，不然接收到为空。

参考文章：https://blog.csdn.net/zmx729618/article/details/78038764

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！