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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37164847/article/details/85772721

文本编辑器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: ["<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)
        }
    });
});
注意事项：后台参数image要和前端参数uploadField：“image”对应，不然接收到为空。

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