利用springboot做后端接口,VUE做前端,现在有用到ueditor编辑器,目前出现很多问题,现在独自记录下来,以便后期记录。
首先,ueditor采用的是vue-ueditor-wrap!作者替我们修正了很多ueditor的BUG。
前端部署,我们就按照vue-ueditor-wrap说明的部署,这里主要讲述用springboot怎么搭建后端。
目前实现的只有上穿图片和涂鸦的功能。重点就是将图片获取到后,进行自定义处理,主要采用MultipartFile的方式进行存储,这个百度一下,一大堆,这里主要体现的是接收ueditor编辑器传递过来的操作。
直接上代码:
package com.syiti.hts.oss.controller; import com.syiti.hts.oss.dto.UeditorDto; import com.syiti.hts.oss.dto.UploadFileDto; import com.syiti.hts.oss.service.IUploadFileService; import com.syiti.hts.oss.service.IUploadImagesService; import com.syiti.hts.oss.util.FileUploadUtil; import com.syiti.hts.oss.util.StringUtil; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import javax.servlet.http.HttpServletRequest; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.util.Enumeration; import java.util.HashMap; import java.util.Iterator; import java.util.Map; /** * @Author: chenrd * @Date: 2019/8/22 10:00 */ @RestController @RequestMapping("ueditor") public class UeditorController { @Autowired private IUploadFileService iuploadFileService; @Autowired private IUploadImagesService iUploadImagesService; @RequestMapping("index") @ResponseBody public Object ueditor(HttpServletRequest request, String callback, String action) { UeditorDto ueditorDto = new UeditorDto(); switch (action) { case "config": // 此处即为获取配置文件的case String config = getUeditorConfig(); return (callback + "(" + config + ");"); case "uploadimage": MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Iterator it = multipartRequest.getFileNames(); while(it.hasNext()) { MultipartFile file = multipartRequest.getFile(it.next().toString()); if(file != null) { Map<Integer, String> map = iUploadImagesService.uploadImage(file); if(map.get(1) != null){ //上传成功 ueditorDto.setState("SUCCESS"); ueditorDto.setTitle(file.getOriginalFilename()); ueditorDto.setUrl(map.get(1)); ueditorDto.setOriginal(file.getOriginalFilename()); }else{ ueditorDto.setState("ERROR"); } } } return ueditorDto; case "uploadscrawl": try { String upfile = request.getParameter("upfile"); if(upfile != null) { //注意!ueditor上传过来的base64并无前面的“data:image/jpeg;base64,”,所有我们需要自行补充。 MultipartFile file = FileUploadUtil.base64ToMultipart("data:image/jpeg;base64,"+upfile); Map<Integer, String> map = iUploadImagesService.uploadImage(file); if (map.get(1) != null) { //上传成功 ueditorDto.setState("SUCCESS"); ueditorDto.setTitle("scrawl.jpg"); ueditorDto.setUrl(map.get(1)); ueditorDto.setOriginal(map.get(1)); } else { ueditorDto.setState("ERROR"); } } }catch (Exception e){ e.printStackTrace(); ueditorDto.setState("ERROR"); } return ueditorDto; } return null; } /** * 返回ueditor的配置文件 * @return */ private String getUeditorConfig() { StringBuilder config = new StringBuilder(); try { //此处即为获取配置文件,因为springboot的原因,目前我只能用流来获取文件内容 InputStream stream = getClass().getClassLoader().getResourceAsStream("ueditor-config.json"); BufferedReader buff = new BufferedReader(new InputStreamReader(stream)); String temp = null; while ((temp = buff.readLine()) != null) { config.append(temp); } //把配置文件中的注释去掉 String configStr = config.toString().replaceAll("/\\*[\\s\\S]*?\\*/", ""); return configStr; } catch (Exception e) { return null; } } }
转自:http://chenrd.com/detail-145.html