wangeditor3上传图片到服务器_WangEditor富文本编辑器图片上传至服务器

欢迎使用 wangEditor 富文本编辑器

var E = window.wangEditor

var editor = new E('#editor')

// 或者 var editor = new E( document.getElementById('editor') )

editor.create()复制代码

TIM图片20190315204827.png (5.64 KB, 下载次数: 29)

2019-3-15 20:49 上传

这很容易就可以显示富文本编辑框了，但是遇到了一个问题，就是图片上传并保存的，有两种思路：其一是上传时直接将图片转为base64，而不用通过保存到服务器，然后显示时再由

base64转为图片，可以将整个编辑框的内容保存到数据库，这种方式看起来很方便。当时看了别人的做法，只能用于少量图片的情况下。稳妥做法，还是将图片上传到服务器，再返回

图片路径到编辑器。

其中怎么上传到服务器这个过程花费了较多时间，步骤如下：

1.根据文档设置图片上传的后台接口：

var E = window.wangEditor

var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器

//开启debug模式

editor.customConfig.debug = true;

// 关闭粘贴内容中的样式

editor.customConfig.pasteFilterStyle = false

// 忽略粘贴内容中的图片

editor.customConfig.pasteIgnoreImg = true

// 使用 base64 保存图片

//editor.customConfig.uploadImgShowBase64 = true

// 上传图片到服务器

editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称

editor.customConfig.uploadImgServer = '/upload'; //设置上传文件的服务器路径

editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M

//自定义上传图片事件

editor.customConfig.uploadImgHooks = {

before : function(xhr, editor, files) {

},

success : function(xhr, editor, result) {

console.log("上传成功");

},

fail : function(xhr, editor, result) {

console.log("上传失败,原因是"+result);

},

error : function(xhr, editor) {

console.log("上传出错");

},

timeout : function(xhr, editor) {

console.log("上传超时");

}

}

editor.create()复制代码   这里不能直接将文档的editor.customConfig.uploadImgServer = '/upload'; 设置路径照搬，而是根据自己的文件路径来写，不然会出错。

2.创建WangEditor实体类：

public class WangEditor {

private Integer errno; //错误代码，0 表示没有错误。

private String[] data; //已上传的图片路径

public WangEditor(String[] data) {

super();

this.errno = 0;

this.data = data;

}

public Integer getErrno() {

return errno;

}

public void setErrno(Integer errno) {

this.errno = errno;

}

public String[] getData() {

return data;

}

public void setData(String[] data) {

this.data = data;

}

@Override

public String toString() {

return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)

+ "]";

}

}复制代码   3.在Controller添加相应的接口

@RequestMapping("/upload")

@ResponseBody

public WangEditor uploadFile(@RequestParam("myFile") MultipartFile multipartFile, HttpServletRequest request) {

String basePath = raindiConfig.getStaticPath() + "/" + raindiConfig.getProductImg() + "/editor/";

try {

// 获取项目路径

String realPath = request.getSession().getServletContext()

.getRealPath("");

//            InputStream inputStream = multipartFile.getInputStream();

//            String contextPath = request.getContextPath();

// 服务器根目录的路径

//            String path = realPath.replace(contextPath.substring(1), "");

// 根目录下新建文件夹upload，存放上传图片

//            String uploadPath = path + "upload";

// 获取文件名称

log.debug("realPath....."+realPath);

String zh_file_suffix = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf("."), multipartFile.getOriginalFilename().length());

String zh_file_name = System.currentTimeMillis()+ zh_file_suffix;

FileLocalHelp.saveFile(basePath,zh_file_name, multipartFile.getBytes());

// 返回图片访问路径

String url = request.getScheme() + "://" + request.getServerName()

+ ":" + request.getServerPort() +"/"+ raindiConfig.getProductImg()+"/editor/"+zh_file_name;

String [] str = {url};

WangEditor we = new WangEditor(str);

return we;

} catch (Exception e) {

log.warn("上传文件失败", e);

}

return null;

}复制代码   4.结果如下：

TIM截图20190315210604.png (126.85 KB, 下载次数: 36)

2019-3-15 21:06 上传