wangEditor图片上传

1.图片上传

 var E = window.wangEditor
 var editor = new E('#editorMenu','#editor')
 //开启debug模式
 editor.customConfig.debug = true;
 // 关闭粘贴内容中的样式
 editor.customConfig.pasteFilterStyle = false
 // 忽略粘贴内容中的图片
 editor.customConfig.pasteIgnoreImg = true
 // 使用 base64 保存图片
 //editor.customConfig.uploadImgShowBase64 = true
 // 上传图片到服务器
 editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
 editor.customConfig.uploadImgServer = 'upload'; //设置上传文件的服务器路径
 editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 3M
 editor.customConfig.uploadImgMaxLength = 5;
 editor.customConfig.uploadImgHooks = {
   
    success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    }
    
 }

后台代码

@Data
public class WangEditor {
	
	private Integer errno; //错误代码，0 表示没有错误。
	private String[] data; //已上传的图片路径
	
	
	public WangEditor(String[] data) {
		super();
		this.errno = 0;
		this.data = data;
	}
	
}

@RequestMapping(value = "/upload",method=RequestMethod.POST)
	@ResponseBody
	public WangEditor uploadFile(
			@RequestParam("myFile") MultipartFile multipartFile,
			HttpServletRequest request) {
		try {
			// 获取项目路径
			String realPath = request.getSession().getServletContext()
					.getRealPath("");
			InputStream inputStream = multipartFile.getInputStream();
			
			String contextPath = request.getServletContext().getContextPath();
			
			// 服务器根目录的路径
			String path = realPath.replace(contextPath.substring(1),"");
			// 根目录下新建文件夹upload，存放上传图片
			String uploadPath = path + "upload";
			// 获取文件名称
			String filename = Calendar.getInstance().getTimeInMillis()+"image";
			// 将文件上传的服务器根目录下的upload文件夹
			File file = new File(uploadPath, filename);
			FileUtils.copyInputStreamToFile(inputStream, file);
			// 返回图片访问路径
			String url = request.getScheme() + "://" + request.getServerName()
					+ ":" + request.getServerPort() + "/upload/" + filename;
			String [] strs = {url}; 
			WangEditor we = new WangEditor(strs);
			return we;
		} catch (IOException e) {
			logger.error("上传文件失败", e);
		}
		return null;
 
	}

2.多图片上传

editor.customConfig.customUploadImg = function (files, insert) {
    var data= new FormData();
    for(var i=0;i

@RequestMapping(value = "/upload1",method=RequestMethod.POST)
	@ResponseBody
	public WangEditor uploadFile(
			@RequestParam("files") MultipartFile[] files,
			HttpServletRequest request) {
 
		try {
			List list = new ArrayList();
			
			for(MultipartFile multipartFile:files) {
				// 获取项目路径
				String realPath = request.getSession().getServletContext()
						.getRealPath("");
				InputStream inputStream = multipartFile.getInputStream();
				
				//String contextPath = request.getServletContext().getContextPath();
				//logger.info(contextPath);
				// 服务器根目录的路径
				String path = realPath;
				// 根目录下新建文件夹upload，存放上传图片
				String uploadPath = path + "upload";
				// 获取文件名称
				String filename = Calendar.getInstance().getTimeInMillis()+"image";
				// 将文件上传的服务器根目录下的upload文件夹
				File file = new File(uploadPath, filename);
				FileUtils.copyInputStreamToFile(inputStream, file);
				// 返回图片访问路径
				String url = request.getScheme() + "://" + request.getServerName()
						+ ":" + request.getServerPort() + "/upload/" + filename;
				list.add(url);
				
			}
			//ArrayList list=new ArrayList();

			String[] strings = new String[list.size()];

			list.toArray(strings);
			WangEditor we = new WangEditor(strings);
			return we;
		} catch (IOException e) {
			logger.error("上传文件失败", e);
		}
		return null;
 
	}