因为自己在模仿博客网站需要用到富文本编辑器，wangEditor是一款简单，开源的编辑器。用它最好不过了，但是在使用的过程中却出现了很多问题，在大佬们的帮助下，终于顺利完成，写下写篇博客希望对后来的人有帮助。

如果你不懂用页面怎么上传图片到服务器的话，请先看这篇文章：

https://blog.csdn.net/tomwildboar/article/details/80102417

下面我所说的是在你已经明白了页面上传图片原理的基础之上。其实在作者的文档上面已经写的很清楚了

当你写好的后台之后你发现就算你上传成功到了你确定的位置，但是页面还是会给你报一个错，就是上传失败。更别提图片的回显了，为什么会出现这样的错呢？

当然是因为你没按照上面的图片的要求去做，上面要求你传递两个参数一个是errno 一个是data（请注意这个data是一个数组那怕你上传的只是一个图片也必须是数组）

下面我给出代码供你们参考（我这里只是简单的上传图片并且回显需要其它参数去自己看文档）

需要的三个jar包自己去下载

 

后台Servlet代码 

package servlet;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.alibaba.fastjson.JSON;
import util.Result;
import util.ResultUtil;

 
public class UploadServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String savePath = this.getServletContext().getRealPath("/upload");	
		savePath = savePath.replace("\\", "\\\\");
		File file = new File(savePath);
		//判断上传文件的保存目录是否存在
		if(!file.exists()){
			//目录不存在需要创建目录
			file.mkdir();
		}
		//上传提示消息
		String message="";	
		try{
			//使用apache文件上传组件处理文件上传步骤
			//1、创建一个DiskFileItemFactory工厂
			DiskFileItemFactory factory = new DiskFileItemFactory();
			//2、创建一个文件上传解析器
			ServletFileUpload upload = new ServletFileUpload(factory);
			//解决上传文件名的中文乱码
			upload.setHeaderEncoding("UTF-8");
			//4、使用ServletFileUpload解析器上传数据，解析结果返回的是一个List<FileItem>集合
			//	每一个FileItem对应一个Form表单的输入项
			List<FileItem> list = upload.parseRequest(request);
			for(FileItem item : list) {
				String filename = item.getName();
				System.out.println(filename);
				if(filename == null || filename.trim().equals("")){
					continue;
				}
				filename = filename.substring(filename.lastIndexOf(".")+1);
				//给文件重新取一个名字UUID
				filename = UUID.randomUUID().toString()+"."+filename;
				//获取item中的上传文件的输入流
				InputStream in = item.getInputStream();
				//创建一个文件输出流
				FileOutputStream out = new FileOutputStream(savePath + "\\" + filename);
				//创建一个缓冲区
				byte[] buffer = new byte[1024];
				//判断输入流中的数据是否已经读完的标识
				int len = 0;
				//循环将输入流读入到缓冲区当中，
				while((len = in.read(buffer)) > 0) {
					//使用FileOutputStream输入流将缓冲区的数据写入到指定的目录(savePath + "\\" +filename)
					out.write(buffer,0,len);
				}
				//这三句代码之及其重要的，就是为了返回JSON数据做准备的
				String [] str = {request.getContextPath() + "/upload/" + filename};					
				Result result = ResultUtil.success(str);
		        response.getWriter().write(JSON.toJSONString(result));//返回url地址

				

		        

		        //关闭流
				in.close();
				out.close();
				//删除处理文件上传时生成的临时文件
				item.delete();
			}			
		} catch(Exception e) {
			e.printStackTrace();
		} 
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

 

两个工具类

 

package util;
import java.io.Serializable;
public class Result implements Serializable {
	private Integer errno;
	private String[] data;
	public Result() {}
	public Integer getErrno() {
		return errno;
	}
	public void setErrno(Integer errno) {
		this.errno = errno;
	}
	public String[] getData() {
		return data;
	}
	public void setData(String[] images) {
		this.data = images;
	}
}








package util;
public class ResultUtil {
	public static Result success (String[] images) {
		Result result = new Result();
		result.setErrno(0);
		result.setData(images);
		return result;	
	}
	public static Result success() {
		return success(null);
	}
}

 

web.xml代码，其实这个也没有什么需要写的，但是为了防止读者出现了问题以为是web.xml的问题，所以在这里也把代码列出来


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
id="WebApp_ID" version="2.5">
  <display-name>unploadanddownload</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>UploadServlet</display-name>
    <servlet-name>UploadServlet</servlet-name>
    <servlet-class>servlet.UploadServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UploadServlet</servlet-name>
    <url-pattern>/UploadServlet</url-pattern>
  </servlet-mapping>
</web-app>