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