Springboot+wangEditor实现本地图片上传
由于通过百度搜索找不到比较完整正确的，故此将本人此次做的过程整理发出，有不对之处请指出。
与几个同学在一起做一个项目时，我处理关于文章发布的功能，通过百度找到了wangEditor,原因是其开源、简单易用。
使用说明详见wangEditor使用手册
------------------------------------------------------------------------------------------------------------------------------------------------------------------
本人使用环境：jdk1.8、apache-maven-3.5.4、Eclipse jee-photon、spring-boot-1.5.2、apache-tomcat-8.0.23(用于模拟云服务器)
先看结果图
1、下载wangEditor富文本编辑器
2、只是使用wangEditor.js，注意在引入.js文件时路径的正确性
\wangEditor-3.1.0\release\wangEditor.js
3、创建webapp项目
配置文件-application.properties
// 访问端口号
server.port=8091
server.Context-path=/
// 视图前缀
spring.mvc.view.prefix=/WEB-INF/
// 视图后缀
spring.mvc.view.suffix=.jsp比如上述配置访问http://localhost:8091/upload
4、依赖（具体的就不粘贴了，只粘贴必要的）-pom.xml
org.springframework.boot
spring-boot-starter-parent
1.5.2.RELEASE
org.springframework.boot
spring-boot-starter-web
javax.servlet
javax.servlet-api
provided
javax.servlet
jstl
org.apache.tomcat.embed
tomcat-embed-jasper
junit
junit
test
5、页面- index.jsp
配置服务器端地址-后台代码的访问地址
editor.customConfig.uploadImgServer = '/test/upload'
自定义上传参数-接收名称（本人使用spring-boot，只需设置同名参数）
editor.customConfig.uploadFileName = 'imgFile'
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
wangEditor 菜单和编辑器区域分离
请在下方编辑区输入文章文章内容
6、为了符合返回格式，目的是让存到服务器的图片回显到编辑器中-ImgInfo.java
作者文档有详细说明
| 上传图片的服务器端接口，接口返回的数据格式如下（实际返回数据时，不要加任何注释！！！） { // errno 即错误代码，0 表示没有错误。 // 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 "errno": 0,
// data 是一个数组，返回若干图片的线上地址 "data": [ "图片1地址", "图片2地址", "……" ]} |
public class ImgInfo {
private Integer error;
private String[] url;
public Integer getError() {
return error;
}
public void setError(Integer error) {
this.error = error;
}
public String[] getUrl() {
return url;
}
public void setUrl(String[] url) {
this.url = url;
}
@Override
public String toString() {
return "ImgInfo [error=" + error + ", url=" + Arrays.toString(url) + "]";
}
}7、启动类-Starter.java
简要说明：
7.1 @RequestMapping("/upload")
表示访问时使用的最后面的名称（http://localhost:8091/upload）
7.2 @RequestMapping("/test/upload")
表示前面提到的index.jsp中设置的服务器端地址
7.3 @ResponseBody
将JavaBean对象改为JSON格式返回给浏览器
JSON参考：https://www.cnblogs.com/qiankun-site/p/5774325.html
7.4 下面变量path与value是对应的，需要根据服务器的地址进行修改
import java.io.File;
import java.io.FileOutputStream;
import javax.servlet.http.HttpServletResponse;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
@SpringBootApplication
@Controller
public class Starter {
public static void main(String[] args) {
SpringApplication.run(Starter.class, args);
}
@RequestMapping("/upload")
public String upload() {
return "index";
}
@RequestMapping("/test/upload")
@ResponseBody
public ImgInfo setImgUrl(@RequestParam("imgFile") MultipartFile file, HttpServletResponse response)
throws Exception {
// Get the file and save it somewhere
byte[] bytes = file.getBytes();
// System.out.println(new String(bytes));
String path = "D:\\tomcat\\apache-tomcat-8.0.23\\webapps\\test\\";
File imgFile = new File(path);
if (!imgFile.exists()) {
imgFile.mkdirs();
}
String fileName = file.getOriginalFilename();// 文件名称
System.out.println(path + fileName);
try (FileOutputStream fos = new FileOutputStream(new File(path + fileName))) {
int len = 0;
fos.write(bytes);
} catch (Exception e) {
e.printStackTrace();
}
String value = "http://localhost:8080/test/" + fileName;
String[] values = { value };
ImgInfo imgInfo = new ImgInfo();
imgInfo.setError(0);
imgInfo.setUrl(values);
System.out.println(imgInfo.toString());
return imgInfo;
}
}
===================================感想========================================
只有在离开了别人的指导，通过种种资料实现自己未曾实现过的功能，才会感觉到自己的渺小。