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

145 篇文章 4 订阅

文本编辑器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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值