Java 开发笔记 - wangEditor 编辑器图片上传

前言

转型 java 开发后入手的第一个项目，写写博客记录一下

该项目使用的是 sping boot + mybatis plus + thymeleaf 项目架构，前后端不分离

编辑器图片上传

公司前端提供的页面里提供了这个富文本编辑器，大概去了解了一下，这是一个个人维护的轻量编辑器。

官网：www.wangEditor.com文档：www.kancloud.cn/wangfupeng/wangeditor3/332599上传图片到服务器官方文档地址：https://www.kancloud.cn/wangfupeng/wangeditor3/335782

官方提供了两种上传本地图片的方式：

使用自带接口进行上传，构造好相应的返回数据即可完全自定义上传图片过程

前端代码

因为本项目的上传图片并不是上传到服务器然后返回完整的图片 URL，所以使用编辑器自带的上传是不太行的；这里考虑的是使用自定义的方式：

页面点击上传图片后，可以获取到图片文件对象，使用前端的 window.URL.createObjectURL(files[0]) 方法会构建处理一个临时 url 处理使用编辑器对象为编辑器文本框中进行标签元素添加，此时可以实现图片点击上传后的展示通过 ajax 发起请求，将文件对象传到后端，存储到 MongoDB 中，返回当前这条数据 id，放到页面元素中通过编辑器提供的方法取到编辑器中的内容，构建参数，发送到后端，进行数据更新 // 编辑器设置 var E = window.wangEditor var editor2 = new E('#editor') // 添加 token // editor2.customConfig.uploadImgParams = { // token: token, // header: header // } // 自带方法请求的接口 // editor2.customConfig.uploadImgServer = '/editorimg' // 图片以 base64 方式展示 // editor2.customConfig.uploadImgShowBase64 = true // 设置图片大小为 1M // editor2.customConfig.uploadImgMaxSize = 1 * 1024 * 1024; // 一次上传的图片不能大于 5 张 // editor2.customConfig.uploadImgMaxLength = 5; // 图片默认名称 // editor2.customConfig.uploadFileName = 'myFile'; // 自定义图片上传 editor2.customConfig.customUploadImg = function (files, insert) { // files 是 input 中选中的文件列表 // 注意这里 files 中的第 0 个元素才是当前上传的文件对象 // insert 是获取图片 url 后，插入到编辑器的方法 var url = window.URL.createObjectURL(files[0]) var formData = new FormData(); formData.append("files", files[0]); $.ajax({ type:"POST", url:"/addimg", //接口请求地址 dataType:'JSON', contentType:false, processData: false, data:formData, success:function(data){ // 图片的展示，预览 url // 图片上传成功，获取到 id，放到标签中然后放到页面元素中 success:function(data){ editor2.cmd.do("insertHTML", "<p><img src=" + url + " style='width: 100px; height: 100px;margin-left:10px' class='imgid' id='" + data.id + "'></p>") error:function () { console.log("失败") } }); } editor2.create() // 编辑器设置尾部

提交代码

function toReply() { // 获取页面文字 let text = editor2.txt.text(); if (text == null || text == "") { alert("处理回复不能为空"); return false; } // 获取所有图片对应的 id // 页面图片元素集合 let imgids = $(".imgid") // 判断图片数量 if (imgids.length > 5) { alert("图片数量不能大于 5 张"); return false; } // 构建图片 id 字符串 let imgidstr = ""; for (let i = 0; i < imgids.length; i++) { let imgid = $(imgids[i]).attr("id"); imgidstr = imgidstr + imgid + "/" } // 问题反馈 id let p_id = $("#p_id").text(); var formdata = {"problemid": p_id, "reply": text, "imgidstr": imgidstr}; console.log("formdata: ", formdata) $.ajax({ type:"POST", url:"/problem/update/", data:formdata, success:function (data) { if (data === "success") { console.log("提交成功"); // 返回这个接口 window.location.href="/problem/list/"; } if (data === "error") { alert("提交失败"); window.location.href="/problem/list/"; } }, error:function (data) { console.log(data) } }) }

后端代码

图片接口

/** * 上传图片 * @param request * @param multipartFile * @param url * @return * @throws Exception */ @PostMapping(value = "/addimg") @ResponseBody public Map<String, Object> getimg(HttpServletRequest request, @RequestParam( value="files",required=false) MultipartFile multipartFile, @RequestParam( value="url",required=false)String url) throws Exception{ Map<String, Object> result = new HashMap<>(); String id = null; try { // 构建文件对象 File f = new File(multipartFile.getOriginalFilename(), multipartFile.getContentType(), multipartFile.getSize(), new Binary(multipartFile.getBytes())); f.setMd5(MD5Util.getMD5(multipartFile.getInputStream())); // 调用 service 方法进行文件的保存，保存到 MongoDB 中 // 文件以二进制的方式保存在 MongoDB 中，图片的展示会直接取二进制进行展示 fileService.saveFile(f); id = f.getId(); } catch (IOException | NoSuchAlgorithmException ex) { ex.printStackTrace(); } // 构建返回数据，将存在 MongoDB 的数据 id 返回回去，放到页面上，方便进行提交 result.put("state", "success"); result.put("url", url); result.put("id", id); return result; }

操作 MongoDB 代码

yml 配置文件

spring: data: mongodb: uri: mongodb://11.11.11.11:1111/demo

service

public interface FileService { /** * 保存文件 * @param File * @return */ File saveFile(File file); }

Impl

@Service public class FileServiceImpl implements FileService { @Autowired public FileRepository fileRepository; @Override public File saveFile(File file) { return fileRepository.save(file); } }

**Repository **

import org.springframework.data.mongodb.repository.MongoRepository; import org.springframework.stereotype.Component; /** * File 存储库. */ // MongoRepository 中封装好了操作 MongoDB 项目的方法 public interface FileRepository extends MongoRepository<File, String> { }