Spring Boot实现wangEditor 5富文本编辑器上传图片到服务器

概述

wangEditor 5富文本编辑器只支持添加网络图片，如果要上传本地图片的话，需要自己写后端代码来实现

实现过程

添加上传图片配置

在编辑器组件代码中找到editorConfig后修改以及添加成下面代码就可以了，编辑器组件的代码查看博客：Vue.js3.2引入wangEditor 5富文本编辑器 | LeDao’s Blog (zoutl.cn)

//修改过
const editorConfig = {placeholder: '请输入内容...', MENU_CONF: {}}
//新添加
editorConfig.MENU_CONF['uploadImage'] = {
  fieldName: 'image',
  server: 'http://localhost:8080/goods/wangEditorUploadImage',
}

Java后端上传图片代码

代码的一些说明以及前置条件（依赖和图片路径）可以参考博客：Spring Boot 实现 VueQuill 富文本编辑器上传图片到服务器 | LeDao’s Blog (zoutl.cn)，其实后端代码都差不多，只是从前端获取数据的方式各有不同·

/**
 * wangEditor富文本编辑器上传图片
 *
 * @param multipartFile
 * @return
 * @throws Exception
 */
@PostMapping("/wangEditorUploadImage")
public Map<String, Object> wangEditorUploadImage(@RequestParam("image") MultipartFile multipartFile) throws Exception {
    //给图片定义一个名称
    String newFileName = DateUtil.getCurrentDateStr2() + System.currentTimeMillis() + ".jpg";
    assert multipartFile != null;
    //实现将图片保存到指定位置
    FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(goodsDetailsImageFilePath + "/" + newFileName));
    //返回指定的格式给前端使用
    Map<String, Object> map = new HashMap<>(16);
    map.put("errno", 0);
    //返回的数据,wangEditor接收
    Map<String, String> data = new HashMap<>(16);
    data.put("url", "http://localhost:8080/image/goods/details/" + newFileName);
    data.put("alt", newFileName);
    data.put("href", "http://localhost:8080/image/goods/details/" + newFileName);
    map.put("data", data);
    return map;
}